[Bootstrap] multiple modals

搭配 Bootstrap 的 Modal,製作多個 modals 同時出現,並讓新出現的完全覆蓋後面的:

<div class="modal fade questionnaire_edit_modal over_lap">
// 重疊 modal
$('.over_lap').on('hidden.bs.modal', function( event ) {
  $(this).removeClass( 'fv-modal-stack' );
  $('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) - 1 );
});
$( '.over_lap' ).on( 'shown.bs.modal', function ( event ) {
  // keep track of the number of open modals
  if ( typeof( $('body').data( 'fv_open_modals' ) ) == 'undefined' ){
    $('body').data( 'fv_open_modals', 0 );
  }

  // if the z-index of this modal has been set, ignore.
  if ( $(this).hasClass( 'fv-modal-stack' ) ){
    return;
  }

  $(this).addClass( 'fv-modal-stack' );

  $('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) + 1 );

  $(this).css('z-index', 1040 + (10 * $('body').data( 'fv_open_modals' )));

  $( '.modal-backdrop' ).not( '.fv-modal-stack' ).css( 'z-index', 1039 + (10 * $('body').data( 'fv_open_modals' )));
  $( '.modal-backdrop' ).not( 'fv-modal-stack' ).addClass( 'fv-modal-stack' );
});

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of