bootstrap 模態(tài)框（modal）實(shí)現(xiàn)水平垂直居中顯示

更新時(shí)間：2017年01月23日 08:30:13 作者：Altaba

這篇文章主要為大家詳細(xì)介紹了bootstrap 模態(tài)框modal實(shí)現(xiàn)水平垂直居中顯示，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

大家可能想加一個(gè)CSS樣式，讓其距離頂部距離變長，實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)，當(dāng)你去試過會發(fā)現(xiàn)很多問題，在不修改源碼的前提下修改插件并沒有自由配置的樣式一直是前端人員頭疼的事情，在此，我小做研究，提出了兩個(gè)方法：
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 
   }); 
  });

會出現(xiàn)問題，每次觸發(fā)事件讓模態(tài)框顯示的時(shí)候，會閃動一下，影響體驗(yàn)，在此查閱資料在此基礎(chǔ)上提出完善的方法2
2：

$('#youModel').on('shown.bs.modal', function (e) { 
      // 關(guān)鍵代碼，如沒將modal設(shè)置為 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 
      }); 
    });

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript 判斷瀏覽器類型及版本
你知道世界上有多少種瀏覽器嗎？除了我們熟知的IE, Firefox, Opera, Safari四大瀏覽器之外，世界上還有近百種瀏覽器。
2009-02-02
javascript的parseFloat()方法精度問題探討
javascript中的parseFloat()方法，大家應(yīng)該不陌生吧，下面為大家介紹下其精度問題，感興趣的朋友不要錯(cuò)過
2013-11-11
純css+js寫的一個(gè)簡單的tab標(biāo)簽頁帶樣式
最近經(jīng)常要用tab標(biāo)簽頁，于是就寫了一個(gè)簡單的tab標(biāo)簽頁，純css+js寫的，帶樣式。大家可以參考下
2014-01-01
js點(diǎn)擊頁面其它地方將某個(gè)顯示的DIV隱藏
今天一朋友問我點(diǎn)擊一按鈕彈出一個(gè)DIV，然后要求點(diǎn)擊頁面其它地方隱藏這個(gè)DIV
2012-07-07
原生javascript實(shí)現(xiàn)文件異步上傳的實(shí)例講解
下面小編就為大家?guī)硪黄鷍avascript實(shí)現(xiàn)文件異步上傳的實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-10-10
JS獲取當(dāng)前時(shí)間實(shí)例代碼(年月日時(shí)分秒)
在javascript中,可以使用Date對象中的Date()方法來獲取當(dāng)前時(shí)間,下面這篇文章主要給大家介紹了關(guān)于JS獲取當(dāng)前時(shí)間(年月日時(shí)分秒)的相關(guān)資料,需要的朋友可以參考下
2022-09-09
原生JS實(shí)現(xiàn)瀑布流插件
本篇文章給大家詳細(xì)分析了一個(gè)原生JS實(shí)現(xiàn)瀑布流插件以及代碼相關(guān)講解，對此有興趣的讀者們參考學(xué)習(xí)下吧。
2018-02-02
JS獲得鼠標(biāo)位置（兼容多瀏覽器ie,firefox）腳本之家修正版
這段代碼經(jīng)過測試，支持ie和ff是個(gè)不錯(cuò)的代碼，并修正了錯(cuò)誤，希望大家先運(yùn)行測試下
2008-11-11
js解決彈窗問題實(shí)現(xiàn)班級跳轉(zhuǎn)DIV示例
本文為大家介紹下js如何解決彈窗問題實(shí)現(xiàn)班級跳轉(zhuǎn)DIV，具體示例如下，感興趣的朋友可以參考下
2014-01-01
ajax讀取數(shù)據(jù)后使用jqchart顯示圖表的方法
這篇文章主要介紹了ajax讀取數(shù)據(jù)后使用jqchart顯示圖表的方法,涉及Ajax操作及圖表插件的相關(guān)使用技巧,需要的朋友可以參考下
2015-06-06