python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions