powmedia / backbone.bootstrap-modal

Bootstrap Modal wrapper for use with Backbone.
MIT License
183 stars 97 forks source link

Negative z-index issue with multiple modals (and possible solution) #74

Open maxchirkov opened 9 years ago

maxchirkov commented 9 years ago

Thanks for the great module, Charles!

Preamble I'm trying to implement dialogs as a way to interact with forms, display alerts, progress and confirmation messages.

So, in my case, a form submission sequence would look like this:

  1. User opens modal with a form.
  2. User submits the form.
  3. Modal with form closes.
  4. Progress modal being displayed (new alert modal)
  5. On submission confirmation progress modal is closed.
  6. Confirmation modal being displayed (new alert modal)

While it seems like too many steps and modals, it works quite well and unobtrusive, IMHO.

The issue

When I submit the form many times in a row to get a few cycles of the sequence, at some point I end up with a modal that has negative z-index. I stepped through your code with a debugger to see what was going on, but couldn't really pin-point where the negative count was starting. Its like close() method was ran multiple times on the same modal, but I couldn't see it. One thing I noticed, is that Modal.count++ happens after an on.cancel event setter on line 222. So, I moved Modal.count++ higher in the code right below modal creation $el.modal(..) on line 171 and it fixed my problem.

I'd appreciate if you could look into this whenever you have a chance.

Thanks again!