bootstrap模態框如何實現水平垂直居中顯示效果

這篇文章主要介紹了bootstrap模態框如何實現水平垂直居中顯示效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

        眾所周知，bootstrap是一款非常實用的CSS框架（主要用于樣式的快速搭建），由于其簡潔，美觀，快捷，響應式等特點備受大家喜歡，但是其本身也是存在很多bug，當應對與具體的業務邏輯的時候往往達不到細節要求，比如今天我要談的bootstrap的模態框，其默認是顯示距離頂端30px，左右居中。

       怎么讓其在垂直方向也居中呢？

       大家可能想加一個CSS樣式，讓其距離頂部距離變長，實踐是檢驗真理的唯一標準，當你去試過會發現很多問題，在不修改源碼的前提下修改插件并沒有自由配置的樣式一直是前端人員頭疼的事情，在此，我小做研究，提出了兩個方法：
1：

$('#youModel').on('shown.bs.modal', function (e) css('display'{ 
   var modalHeight=$(window).height() / 2 - $('#youModel .modal-dialog').height() / 2; 
   $(this).find('.modal-dialog').css({ 
    'margin-top': modalHeight 
   }); 
  });

會出現問題，每次觸發事件讓模態框顯示的時候，會閃動一下，影響體驗，在此查閱資料在此基礎上提出完善的方法2
2：

$('#youModel').on('shown.bs.modal', function (e) { 
      // 關鍵代碼，如沒將modal設置為 block，則$modala_dialog.height() 為零 
      $(this).css('display', 'block'); 
      var modalHeight=$(window).height() / 2 - $('#youModel .modal-dialog').height() / 2; 
      $(this).find('.modal-dialog').css({ 
        'margin-top': modalHeight 
      }); 
    });

這樣就可以解決閃動問題并完美居中了。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“bootstrap模態框如何實現水平垂直居中顯示效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!