Multiple modals overlay

by

Solution inspired by the answers of @YermoLamers & @Ketwaroo.

Backdrop z-index fix
This solution uses a setTimeout because the .modal-backdrop isn’t created when the event show.bs.modal is triggered.

$(document).on('show.bs.modal', '.modal', function() {
  const zIndex = 1040 + 10 * $('.modal:visible').length;
  $(this).css('z-index', zIndex);
  setTimeout(() => $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'));
});
  • This works for every .modal created on the page (even dynamic modals)
  • The backdrop instantly overlays the previous modal

Example jsfiddle

z-index
If you don’t like the hardcoded z-index for any reason you can calculate the highest z-index on the page like this:

const zIndex = 10 +
  Math.max(...Array.from(document.querySelectorAll('*')).map((el) => +el.style.zIndex));

Scrollbar fix
If you have a modal on your page that exceeds the browser height, then you can’t scroll in it when closing an second modal. To fix this add:

$(document).on('hidden.bs.modal', '.modal',
  () => $('.modal:visible').length && $(document.body).addClass('modal-open'));

Versions
This solution is tested with bootstrap 3.1.0 – 3.3.5

More Related Contents:

  1. Bootstrap: Open Another Modal in Modal
  2. Keep Bootstrap Dropdown Open When Clicked Off
  3. Getting Bootstrap’s modal content from another page
  4. Contain form within a bootstrap popover?
  5. Calling a function on Bootstrap modal open
  6. Retain Twitter Bootstrap Collapse state on Page refresh/Navigation
  7. How to hide Bootstrap modal with javascript?
  8. Bootstrap modal: background jumps to top on toggle
  9. How to keep the changes made to DOM by javascript/jquery on page refresh
  10. Bootstrap modal hide is not working
  11. My code dont works but I don't know why [closed]
  12. Bootstrap modal appearing under background
  13. Avoid dropdown menu close on click inside
  14. Changing nav-bar color after scrolling?
  15. Bootstrap navbar Active State not working
  16. How to reset the bootstrap modal when it gets closed and open it fresh again?
  17. How can I close a Twitter Bootstrap popover with a click from anywhere (else) on the page?
  18. Twitter Bootstrap Modal stop Youtube video
  19. How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?
  20. Bootstrap modal: close current, open new
  21. Trees in Twitter Bootstrap [closed]
  22. Twitter Bootstrap. Why do modal events work in JQuery but NOT in pure JS?
  23. How to open Bootstrap dropdown programmatically
  24. Onclick reload the div only
  25. How to resize Twitter Bootstrap modal dynamically based on the content
  26. How do I keep the current tab active with twitter bootstrap after a page reload?
  27. How to Bootstrap navbar static to fixed on scroll?
  28. Bootstrap and jQueryUI Conflict
  29. Bootstrap button drop-down inside responsive table not visible because of scroll
  30. “Force Reflow” in CSS transitions in Bootstrap

Leave a Comment