SHARE
TWEET

Abrir modal em cima de modal

gtw7375 Apr 20th, 2016 144 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <h2>Stacked Bootstrap Modal Example.</h1>
  2. <p>View the source for the implementation.</p>
  3. <p>There's an article discussing the approach <a href="http://miles-by-motorcycle.com/fv-b-8-670/stacking-bootstrap-dialogs-using-event-callbacks">here</a></p>
  4.  
  5.  
  6.         <a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
  7.  
  8. <div class="modal" id="myModal">
  9.     <div class="modal-dialog">
  10.       <div class="modal-content">
  11.         <div class="modal-header">
  12.           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  13.           <h4 class="modal-title">Modal 1</h4>
  14.         </div><div class="container"></div>
  15.         <div class="modal-body">
  16.           Content for the dialog / modal goes here.
  17.           <br>
  18.           <br>
  19.           <br>
  20.           <p>more content</p>
  21.           <br>
  22.           <br>
  23.           <br>
  24.           <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
  25.         </div>
  26.         <div class="modal-footer">
  27.           <a href="#" data-dismiss="modal" class="btn">Close</a>
  28.           <a href="#" class="btn btn-primary">Save changes</a>
  29.         </div>
  30.       </div>
  31.     </div>
  32. </div>
  33.  
  34. <div class="modal" id="myModal2">
  35.     <div class="modal-dialog">
  36.       <div class="modal-content">
  37.         <div class="modal-header">
  38.           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  39.           <h4 class="modal-title">Modal 2</h4>
  40.         </div><div class="container"></div>
  41.         <div class="modal-body">
  42.           Content for the dialog / modal goes here.
  43.           <br>
  44.           <br>
  45.           <p>come content</p>
  46.           <br>
  47.           <br>
  48.           <br>
  49.           <a data-toggle="modal" href="#myModal3" class="btn btn-primary">Launch modal</a>
  50.         </div>
  51.         <div class="modal-footer">
  52.           <a href="#" data-dismiss="modal" class="btn">Close</a>
  53.           <a href="#" class="btn btn-primary">Save changes</a>
  54.         </div>
  55.       </div>
  56.     </div>
  57. </div>
  58.  
  59. <div class="modal" id="myModal3">
  60.     <div class="modal-dialog">
  61.       <div class="modal-content">
  62.         <div class="modal-header">
  63.           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  64.           <h4 class="modal-title">Modal 3</h4>
  65.         </div><div class="container"></div>
  66.         <div class="modal-body">
  67.           Content for the dialog / modal goes here.
  68.           <br>
  69.           <br>
  70.           <br>
  71.           <br>
  72.           <br>
  73.           <a data-toggle="modal" href="#myModal4" class="btn btn-primary">Launch modal</a>
  74.         </div>
  75.         <div class="modal-footer">
  76.           <a href="#" data-dismiss="modal" class="btn">Close</a>
  77.           <a href="#" class="btn btn-primary">Save changes</a>
  78.         </div>
  79.       </div>
  80.     </div>
  81. </div>
  82.  
  83. <div class="modal" id="myModal4" data-backdrop="static">
  84.     <div class="modal-dialog">
  85.       <div class="modal-content">
  86.         <div class="modal-header">
  87.           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  88.           <h4 class="modal-title">Modal 4</h4>
  89.         </div><div class="container"></div>
  90.         <div class="modal-body">
  91.           Content for the dialog / modal goes here.
  92.         </div>
  93.         <div class="modal-footer">
  94.           <a href="#" data-dismiss="modal" class="btn">Close</a>
  95.           <a href="#" class="btn btn-primary">Save changes</a>
  96.         </div>
  97.       </div>
  98.     </div>
  99. </div>
  100.        
  101.         <script type='text/javascript' src=" ARQUIVO JQUERY "></script>
  102.  
  103.  
  104.         <script type='text/javascript' src=" ARQUIVO BOOTSTRAP.MIN.JS"></script>
  105.  
  106.  
  107.  
  108.        
  109.         <!-- JavaScript jQuery code from Bootply.com editor -->
  110.        
  111.         <script type='text/javascript'>        
  112.         $(document).ready(function() {        
  113.             $('#openBtn').click(function(){
  114.                 $('#myModal').modal({show:true})
  115.         });
  116.  
  117.  
  118.     $('.modal').on('hidden.bs.modal', function( event ) {
  119.                 $(this).removeClass( 'fv-modal-stack' );
  120.                 $('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) - 1 );
  121.                 });
  122.  
  123.  
  124.         $( '.modal' ).on( 'shown.bs.modal', function ( event ) {                  
  125.                    // keep track of the number of open modals
  126.                    
  127.                    if ( typeof( $('body').data( 'fv_open_modals' ) ) == 'undefined' ){
  128.                      $('body').data( 'fv_open_modals', 0 );
  129.                    }
  130.                    
  131.                      
  132.                    // if the z-index of this modal has been set, ignore.
  133.                        
  134.                 if ( $(this).hasClass( 'fv-modal-stack' ) ){
  135.                         return;
  136.                  }
  137.                    
  138.                 $(this).addClass( 'fv-modal-stack' );
  139.                 $('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) + 1 );
  140.                 $(this).css('z-index', 1040 + (10 * $('body').data( 'fv_open_modals' )));
  141.                 $( '.modal-backdrop' ).not( '.fv-modal-stack' )
  142.                         .css( 'z-index', 1039 + (10 * $('body').data( 'fv_open_modals' )));
  143.                 $( '.modal-backdrop' ).not( 'fv-modal-stack' )
  144.                         .addClass( 'fv-modal-stack' );
  145.                  });        
  146.            });
  147.        
  148.         </script>        
  149.     </body>
  150. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top