快捷導(dǎo)航

Bootstrap模態(tài)框(modal)垂直居中的實(shí)例代碼

更新時(shí)間：2016年08月18日 14:33:31 作者：ZEKELOVE

這篇文章主要介紹了Bootstrap模態(tài)框(modal)垂直居中的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下

Bootstrap官網(wǎng)下載：http://v3.bootcss.com/

　　今天就在使用Bootstrap框架中遇到的一個(gè)問題分享一下，在產(chǎn)品開發(fā)的過程中使用了大量的彈出窗口（modal）。

　　剛開始學(xué)習(xí)使用的過程中就發(fā)現(xiàn)此窗口不能垂直居中，總是偏上，并且不能拖動(dòng)，看了一下使用說明也沒有提供過多的屬性設(shè)置和方法，就這樣使用默認(rèn)的方式一直用著。最近，客戶卻提出了一個(gè)要求：能不能讓彈出窗口居中，因?yàn)橐恍┬〉拇翱谄峡偢杏X整體頁面失衡，大一點(diǎn)的還過得去。

　　因?yàn)橹皩?duì)Bootstrap也不是很熟悉，便開始baidu、google，發(fā)現(xiàn)只有很少的解決方案，如下：

$("#myModal").modal().css({
"margin-top": function () {
return - ($(this).height() / 2);
}
});

　　參考地址：http://www.g2w.me/2012/06/bootstrap-modal-shown-in-the-center/　　

　　這種方法自己試了一下，并不能完全居中，并且窗口的大小不一樣的話，每次顯示的margin-top值也會(huì)改變，遮蓋層還會(huì)出現(xiàn)滾動(dòng)條，效果也不好看。

　　自己也試了改了幾種方式也不容樂觀，發(fā)現(xiàn)在窗口彈出之前是獲取不到$(this).height()的值，本想著是用($(window).height()-$(this).height())/2，發(fā)現(xiàn)還是不可行。

　　最終只能研究一下源碼了，發(fā)現(xiàn)可以在bootstrap.js文件900行后面添加如下代碼，便可以實(shí)現(xiàn)垂直居中。

that.$element.children().eq(0).css("position", "absolute").css({
"margin":"0px",
"top": function () {
return (that.$element.height() - that.$element.children().eq(0).height()-40) / 2 + "px";
},
"left": function () {
return (that.$element.width() - that.$element.children().eq(0).width()) / 2 + "px";
}
});

　　頁面代碼如下：

<div>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>

　效果圖如下：