修改bootstrap.js文件使模態(tài)框垂直居中顯示

liaoyg8023 發(fā)布于2019-08-19 18:01 / 575人閱讀

摘要：注意這里修改的版本為首先找到關(guān)于模態(tài)框的代碼段，找到這里是方法在方法中合適的位置添加下面一段代碼使模態(tài)框垂直居中顯示重新打開頁面會(huì)發(fā)現(xiàn)，模態(tài)框會(huì)出現(xiàn)在垂直居中的位置，并且不受滾動(dòng)條的影響。

注意：這里修改的bootstrap版本為3.3.0

首先找到bootstrap.js關(guān)于模態(tài)框的代碼段，找到

Modal.prototype.show=function (_relatedTarget) {

//這里是show方法
//...
//...

}

在show方法中合適的位置添加下面一段代碼：

//使模態(tài)框垂直居中顯示
var $dialog=that.$element.find("div.modal-dialog"),
   top=(document.documentElement.clientHeight-$dialog.height())/2;  
  $dialog.css({"margin":+top+"px auto"});

重新打開頁面會(huì)發(fā)現(xiàn)，模態(tài)框會(huì)出現(xiàn)在垂直居中的位置，并且不受滾動(dòng)條的影響。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79096.html

相關(guān)文章

你不知道的CSS（二）

摘要：用來控制表格單元格寬度你也許遇到過給表格設(shè)置了寬度，但是不起作用的問題。這是因?yàn)閱卧竦膶挾仁歉鶕?jù)其內(nèi)容進(jìn)行調(diào)整的。顯而易見的，默認(rèn)情況下，單元格寬度受其內(nèi)容約束。而設(shè)置了后，其單元格寬度變得可控了。本文首發(fā)于我的博客在上文《你不知道的CSS（一）》中，介紹了兄弟選擇器美化表單，font-size:0消除間隙，overflow清除浮動(dòng)，border繪制三角形等7個(gè)實(shí)用技巧。由于文章長...

sewerganger 2019-08-29 13:22 評(píng)論0 收藏0
前端實(shí)例練習(xí) - 模態(tài)框

摘要：模態(tài)框代碼儲(chǔ)存在效果預(yù)覽初衷很多人在初學(xué)前端的時(shí)候都會(huì)問，如何入門前端同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對(duì)于目前網(wǎng)絡(luò)上所能看到的入門級(jí)的教材并不太滿意。在這里本人整理了目前頁面上常見功能實(shí)現(xiàn)的具體實(shí)例。模態(tài)框代碼儲(chǔ)存在Github效果預(yù)覽初衷：很多人在初學(xué)前端的時(shí)候都會(huì)問，如何入門前端？同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對(duì)于目前網(wǎng)絡(luò)上所能看到的入門級(jí) 的教材并不...

xiaotianyi 2019-08-21 11:37 評(píng)論0 收藏0
前端實(shí)例練習(xí) - 模態(tài)框

摘要：模態(tài)框代碼儲(chǔ)存在效果預(yù)覽初衷很多人在初學(xué)前端的時(shí)候都會(huì)問，如何入門前端同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對(duì)于目前網(wǎng)絡(luò)上所能看到的入門級(jí)的教材并不太滿意。在這里本人整理了目前頁面上常見功能實(shí)現(xiàn)的具體實(shí)例。模態(tài)框代碼儲(chǔ)存在Github效果預(yù)覽初衷：很多人在初學(xué)前端的時(shí)候都會(huì)問，如何入門前端？同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對(duì)于目前網(wǎng)絡(luò)上所能看到的入門級(jí) 的教材并不...

CODING 2019-08-29 12:11 評(píng)論0 收藏0
前端實(shí)例練習(xí) - 模態(tài)框

摘要：模態(tài)框代碼儲(chǔ)存在效果預(yù)覽初衷很多人在初學(xué)前端的時(shí)候都會(huì)問，如何入門前端同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對(duì)于目前網(wǎng)絡(luò)上所能看到的入門級(jí)的教材并不太滿意。在這里本人整理了目前頁面上常見功能實(shí)現(xiàn)的具體實(shí)例。模態(tài)框代碼儲(chǔ)存在Github效果預(yù)覽初衷：很多人在初學(xué)前端的時(shí)候都會(huì)問，如何入門前端？同為在前端學(xué)習(xí)道路上，奮力追趕的一員，本人對(duì)于目前網(wǎng)絡(luò)上所能看到的入門級(jí) 的教材并不...

caige 2019-08-01 16:28 評(píng)論0 收藏0
Bootstrap使用模態(tài)框modal實(shí)現(xiàn)表單提交彈出框

摘要：模態(tài)框插件模態(tài)框是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個(gè)單獨(dú)的源的內(nèi)容，可以在不離開父窗體的情況下有一些互動(dòng)。子窗體可提供信息交互等。 Bootstrap 模態(tài)框（Modal）插件模態(tài)框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個(gè)單獨(dú)的源的內(nèi)容，可以在不離開父窗體的情況下有一些互動(dòng)。子窗體可提供信息、交互等。如果您想要單獨(dú)引用該插件的功能，那么您需要引用...

wind3110991 2019-08-02 15:56 評(píng)論0 收藏0