BootStrap模態(tài)框不垂直居中的解決方法
更新時間：2017年10月19日 10:16:17 作者：夏爾_
這篇文章主要為大家詳細介紹了BootStrap模態(tài)框不垂直居中的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了BootStrap模態(tài)框不垂直居中的解決方法，供大家參考，具體內(nèi)容如下
解決問題：BootStrap自帶的模態(tài)框不垂直居中
解決方案：調(diào)用BootStrap為我們提供的方法$('.modal').on('show.bs.modal', function(){});
在模態(tài)框顯示之前我們用JS修改他的Top值，
具體代碼如下：
/**
* 垂直居中模態(tài)框
**/
function centerModals() {
$('.modal').each(function(i) {
var $clone = $(this).clone().css('display', 'block').appendTo('body');
var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
top = top > 50 ? top : 0;
$clone.remove();
$(this).find('.modal-content').css("margin-top", top - 50);
});
}
// 在模態(tài)框出現(xiàn)的時候調(diào)用垂直居中方法
$('.modal').on('show.bs.modal', centerModals);
// 在窗口大小改變的時候調(diào)用垂直居中方法
$(window).on('resize', centerModals);
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Javascript中判斷對象是否為空,本文利用Javascript 中的對象就是一個字典的特性,檢查對象中有沒有鍵值對實現(xiàn)判斷對象是否為空,需要的朋友可以參考下2015-06-06
做輸入校驗的時候如果你前端框架用的是bootstrap的話，首推bootstrapValidator校驗方式，下面通過本文給大家分享下校驗流程，一起看看吧2016-12-12
這篇文章主要介紹了JavaScript的AOP編程,以實例形式分析了javascript面向切面編程的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
下面小編就為大家?guī)硪黄猨s實現(xiàn)字符全排列算法的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
重寫javascript中window.confirm的行為
javascript中window.confirm這個方法很好用，可以彈出一個確認對話框.但有一個問題是，它默認的情況下，將選中那個"確定"按鈕，當用戶有意無意的在鍵盤回車，就是說按下Enter鍵的時候，就會自動返回true。在很多時候其實我們不希望這樣2012-10-10
這篇文章主要為大家介紹了Blob對象實現(xiàn)文件上傳下載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
本文將提供兩種方式保存圖片，大家可以根據(jù)喜歡自由選擇2012-11-11
自定義tabBar可以讓開發(fā)者更加靈活地設置tabBar樣式,以滿足更多個性化的場景,下面這篇文章主要給大家介紹了關于小程序如何實現(xiàn)中間帶加號tabbar的相關資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了淺談FastClick 填坑及源碼解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了JS關鍵字球狀旋轉(zhuǎn)效果的實例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11