backbone.bootstrap-modal
backbone.bootstrap-modal copied to clipboard
Negative z-index issue with multiple modals (and possible solution)
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:
- User opens modal with a form.
- User submits the form.
- Modal with form closes.
- Progress modal being displayed (new alert modal)
- On submission confirmation progress modal is closed.
- 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!