JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
 <h2>Stacked Bootstrap Modal Example.</h2>
 <a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</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 1</h4>

       </div>
       <div class="container"></div>
       <div class="modal-body">Content for the dialog / modal goes here.
         <br>
         <br>
         <br>
         <p>more content</p>
         <br>
         <br>
         <br> <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>

       </div>
       <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
         <a href="#" class="btn btn-primary">Save changes</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 2</h4>

       </div>
       <div class="container"></div>
       <div class="modal-body">Content for the dialog / modal goes here.
         <br>
         <br>
         <p>come content</p>
         <br>
         <br>
         <br> <a data-toggle="modal" href="#myModal3" class="btn btn-primary">Launch modal</a>

       </div>
       <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
         <a href="#" class="btn btn-primary">Save changes</a>

       </div>
     </div>
   </div>
 </div>
 <div class="modal fade" id="myModal3">
   <div class="modal-dialog">
     <div...

CSS

/* crazy batman newspaper spinny thing */
.rotate {
  transform: rotate(180deg);
  transition: all 0.5s;
}

.rotate.in {
  transform: rotate(1800deg);
  transition: all 1.5s;
}

JavaScript

$(document).ready(function() {

  $('#openBtn').click(() => $('#myModal').modal({
    show: true
  }));

  $(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'));
  });

});