Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cleanup modal z-index #11868

Merged
merged 2 commits into from Dec 14, 2013
Merged

Cleanup modal z-index #11868

merged 2 commits into from Dec 14, 2013

Conversation

tlindig
Copy link
Contributor

@tlindig tlindig commented Dec 13, 2013

We have variables @zindex-modal and @zindex-modal-background.

This variables were not applied to .modal and .modal-backdrop, but something quite different. This values were used as base for calculation new z-index. But without need.

This patch use @zindex-modal for .modal and @zindex-modal-background for .modal-backdrop, that is what the name suggests.

removed z-index for .modal-dialog, it was not necessary because the parent element (.modal) already has a z-index.

…backdrop.

removed z-index for .modal-dialog, it was not necessary because the parent element (.modal) already has a z-index.
@mdo
Copy link
Member

mdo commented Dec 14, 2013

Does this properly overlay tooltips and popovers and navbars from content below the modal backdrop?

@tlindig
Copy link
Contributor Author

tlindig commented Dec 14, 2013

Better than before.

In variables.less is defined:

// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)

@zindex-navbar: 1000;
@zindex-dropdown: 1000;
@zindex-popover: 1010;
@zindex-tooltip: 1030;
@zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040;
@zindex-modal: 1050;

But then, in the modals.less

  • .modal gets z-index: @zindex-modal-background;
  • .modal-dialog gets z-index: (@zindex-modal-background + 10);
  • .modal-backdrop gets z-index: (@zindex-modal-background - 10);

How you see, in the old code, @zindex-modal was never used!
.modal-backdrop gets same value like @zindex-navbar-fixed. So, that only works without error, because navbar is mostly in the DOM at top and modals are defined later in the DOM and so they shown above.

@mdo mdo merged commit 37b2c8a into twbs:master Dec 14, 2013
@mdo mdo mentioned this pull request Dec 14, 2013
@mdo
Copy link
Member

mdo commented Dec 14, 2013

Groovy, thanks for doing the research and cleanup <3.

@tlindig tlindig deleted the cleanup_modal_z-index branch December 17, 2013 13:31
@tlindig tlindig mentioned this pull request Feb 7, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants