Multiple Modals Overlay

Multiple modals overlay

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

Bootstrap multiple Modals with Backdrop over one

I was able to access the specific backdrop in my CSS by using nth-of-type(). Thus I put the z-index of the backdrop of the delete-modal a little higher than the usual modal and put the z-index of the delete-modal even higher than that.

.delete-modal {
    z-index: 1060;
}
.modal-backdrop:nth-of-type(3) { 
    z-index: 1050;
}

Multiple Modals with same structure on one page

Bootstrap does this by specifying a data-target property on triggering button. Something like this:

<button class="modal-toggle" data-element="two">Show modal 2</button>

Where data-element="two" points to the modal that is to be shown:

<div class="modal" id="two">

Now with some minor changes to the click event handler you can select the correct modal specified in the data-element and show it.

// Quick & dirty toggle to demonstrate modal toggle behavior$('.modal-toggle').on('click', function(e) {  e.preventDefault();    var elementID = $(this).attr("data-element");  $('.modal#' +elementID ).toggleClass('is-visible');});
$(".modal-close").on("click", function(e) {  e.preventDefault();  $(".modal").removeClass("is-visible");});

/** * Box model adjustments * `border-box`... ALL THE THINGS - http://cbrac.co/RQrDL5 */
*,*:before,*:after {  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}
/** * 1. Force a vertical scrollbar - http://cbrac.co/163MspB * NOTE: Use `text-rendering` with caution - http://cbrac.co/SJt8p1 * NOTE: Avoid the webkit anti-aliasing trap - http://cbrac.co/TAdhbH * NOTE: IE for Windows Phone 8 ignores `-ms-text-size-adjust` if the *       viewport <meta> tag is used - http://cbrac.co/1cFrAvl */
html {  font-size: 100%;  overflow-y: scroll; /* 1 */  min-height: 100%;}
/** * 1. Inherits percentage declared on above <html> as base `font-size` * 2. Unitless `line-height`, which acts as multiple of base `font-size` */
body {  font-family: "Helvetica Neue", Arial, sans-serif;  font-size: 1em;   /* 1 */  line-height: 1.5; /* 2 */  color: #444;}
/* Page wrapper */.wrapper {  width: 90%;  max-width: 800px;  margin: 4em auto;  text-align: center;}
/* Icons */.icon {  display: inline-block;  width: 16px;  height: 16px;  vertical-align: middle;  fill: currentcolor;}
/* Headings */h1,h2,h3,h4,h5,h6 {  color: #222;  font-weight: 700;  font-family: inherit;  line-height: 1.333;  text-rendering: optimizeLegibility;}
/** * Modals ($modals) */
/* 1. Ensure this sits above everything when visible */.modal {    position: absolute;    z-index: 10000; /* 1 */    top: 0;    left: 0;    visibility: hidden;    width: 100%;    height: 100%;}
.modal.is-visible {    visibility: visible;}
.modal-overlay {  position: fixed;  z-index: 10;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: hsla(0, 0%, 0%, 0.5);  visibility: hidden;  opacity: 0;  transition: visibility 0s linear 0.3s, opacity 0.3s;}
.modal.is-visible .modal-overlay {  opacity: 1;  visibility: visible;  transition-delay: 0s;}
.modal-wrapper {  position: absolute;  z-index: 9999;  top: 6em;  left: 50%;  width: 32em;  margin-left: -16em;  background-color: #fff;  box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);}
.modal-transition {  transition: all 0.3s 0.12s;  transform: translateY(-10%);  opacity: 0;}
.modal.is-visible .modal-transition {  transform: translateY(0);  opacity: 1;}
.modal-header,.modal-content {  padding: 1em;}
.modal-header {  position: relative;  background-color: #fff;  box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);  border-bottom: 1px solid #e8e8e8;}
.modal-close {  position: absolute;  top: 0;  right: 0;  padding: 1em;  color: #aaa;  background: none;  border: 0;}
.modal-close:hover {  color: #777;}
.modal-heading {  font-size: 1.125em;  margin: 0;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}
.modal-content > *:first-child {  margin-top: 0;}
.modal-content > *:last-child {  margin-bottom: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <div class="wrapper">    <h1>Simple jQuery Modal</h1>    <button class="modal-toggle" data-element="one">Show modal 1</button>    <button class="modal-toggle" data-element="two">Show modal 2</button>  </div>    <div class="modal" id="one">    <div class="modal-overlay modal-toggle"></div>    <div class="modal-wrapper modal-transition">      <div class="modal-header">        <button class="modal-close modal-toggle"><svg class="icon-close icon" viewBox="0 0 32 32"><use xlink:href="#icon-close"></use></svg></button>        <h2 class="modal-heading">This is modal 1.</h2>      </div>            <div class="modal-body">        <div class="modal-content">          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eum delectus, libero, accusantium dolores inventore obcaecati placeat cum sapiente vel laboriosam similique totam id ducimus aperiam, ratione fuga blanditiis maiores.</p>          <button class="modal-close">Close</button>        </div>      </div>    </div>  </div>      <div class="modal" id="two">    <div class="modal-overlay modal-toggle"></div>    <div class="modal-wrapper modal-transition">      <div class="modal-header">        <button class="modal-close modal-toggle"><svg class="icon-close icon" viewBox="0 0 32 32"><use xlink:href="#icon-close"></use></svg></button>        <h2 class="modal-heading">This is modal 2.</h2>      </div>            <div class="modal-body">        <div class="modal-content">          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eum delectus, libero, accusantium dolores inventore obcaecati placeat cum sapiente vel laboriosam similique totam id ducimus aperiam, ratione fuga blanditiis maiores.</p>          <button class="modal-close">Close</button>        </div>      </div>    </div>  </div>

Multiple Modals Overlay