Multiple Modals Overlay

Multiple Modals Overlay -Multiple Popups on one page!

This code works for every “.modal” created on the page (even dynamic modals) and backdrop instantly overlays the previous modal.

The below multiple modals overlay example uses a setTimeout because the “.modal-backdrop” is not created when the event “show.bs.modal” is triggered.

The Example for multiple modals overlay and it looks like -
//Multiple modals overlay
$(function () {
  $('#openBtn').click(function () {
    $('#myModal').modal({
      show: true     
    })
  });

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

});


And HTML
<h2>Multiple modals overlay </h2>
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal 1</a>

<div class="modal fade" id="myModal">
   <div class="modal-dialog">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                 <h4 class="modal-title">Modal dialog title</h4>
           </div>
           <div class="container"></div>
           <div class="modal-body">
            <p>Your content for the dialog / modal goes here. </p>
             <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>
           </div>
           <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
 <a href="#" class="btn btn-primary">Save</a>
           </div>
       </div>
   </div>
</div>

<div class="modal fade" id="myModal2">
   <div class="modal-dialog">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                 <h4 class="modal-title">Modal dialog title</h4>
           </div>
           <div class="container"></div>
           <div class="modal-body">
              <p>Your content for the dialog / modal goes here. </p>
           </div>
           <div class="modal-footer"> 
             <a href="#" data-dismiss="modal" class="btn">Close</a>
             <a href="#" class="btn btn-primary">Save</a>
           </div>
       </div>
   </div>
</div>


ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

Multiple Modals Overlay -Multiple Popups on one page! Multiple Modals Overlay -Multiple Popups on one page! Reviewed by Anil Singh on 10:41 PM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^