Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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 1a>

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 titleh4>
           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 2a>
           div>
           div class="modal-footer"> a href="#" data-dismiss="modal" class="btn">Closea>
 a href="#" class="btn btn-primary">Savea>
           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 titleh4>
           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


This post first appeared on Programming, please read the originial post: here

Share the post

Multiple Modals Overlay -Multiple Popups on one page!

×

Subscribe to Programming

Get updates delivered right to your inbox!

Thank you for your subscription

×