Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Modal backdrop broken for previous modal when stacking modals #1653

Closed
chrisirhc opened this issue Jan 23, 2014 · 4 comments
Closed

Modal backdrop broken for previous modal when stacking modals #1653

chrisirhc opened this issue Jan 23, 2014 · 4 comments

Comments

@chrisirhc
Copy link
Contributor

See:
http://plnkr.co/edit/cBzJvvBrDUbZ9mDbwdT3?p=preview

Click Open Me, and then click Open Me in the modal and then again in the modal.

You'll see that the previous modal isn't covered by the backdrop but the modal behind that is covered.

This is because the backdrop isn't right before the topmost modal and the previous modal has the same z-index as the backdrop.

Two ways to fix this:

  1. Increase the backdrop's z-index by 1 when its index is > 0 (so that it'll always be higher than any previous modal if there's one). This is the least complicated way as it still works with the same index variable with only changes in the template.
  2. Move the backdrop to the topmost modal that requests for a backdrop (backdrop isn't set to false). Always move the backdrop when creating a new modal that requests for a backdrop. Need to remember to move it back whenever closing the modal. This is quite complicated.

The first way is a quick fix. Just wondering if anybody else has thoughts on this.

@Foxandxss
Copy link
Contributor

What I don't understand is that the first time you start opening, they always get a new place to appear (with the issue described), then you close them all, start again and they are all stacked correctly. Weird behavior for sure.

@chrisirhc
Copy link
Contributor Author

Oh that's just because of the styling (I only added window classes for modal1,2,3), they're not stacked correctly, it's just that they're on top of each other so you can't see that the backdrop isn't correctly styled.

I've updated the Plunker to fix that issue. Try it again.

@Foxandxss
Copy link
Contributor

True true sorry, didn't notice the inline style.

@emmanuel-vasseur
Copy link

Hi,

Same issue for me.

In my case I have just fix the base z-index to 1045 instead of 1040.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants