bootstrap多層模態(tài)框滾動(dòng)條消失的問題
bootstrap 打開多層模態(tài)框的情況下，關(guān)閉任意一個(gè)模態(tài)框，都會(huì)導(dǎo)致其余模態(tài)框的滾動(dòng)條消失。
監(jiān)測(cè)html發(fā)現(xiàn)，當(dāng)打開模態(tài)框時(shí)，會(huì)給 body 元素加一個(gè) modal-open 的 class，而在 bootstrap.css 中，有這樣一條 css 規(guī)則：
.modal-open .modal {overflow-x:hidden; overflow-y:auto}
因?yàn)橛?overflow-y:auto，所以模態(tài)框才可以滾動(dòng)，而當(dāng)關(guān)閉任何一個(gè)模態(tài)框時(shí)，body 元素的 css 規(guī)則 modal-open 會(huì)被移除掉，自然 overflow-y:auto 也就沒有了，所以模態(tài)框的滾動(dòng)條就消失了。
解決方案是在模態(tài)框的 div 元素上加一條 style="overflow: auto"，如下：
<div class="modal fade" ... style="overflow: auto">
這樣，模態(tài)框的滾動(dòng)就不依賴 body 元素的 css 規(guī)則 modal-open 了。
實(shí)例
<div class="modal fade" id="myModal2" data-backdrop="static" <span style="color:#ff0000;">style="overflow:scroll"</span>
popover-page-id="CS040104">
<div class="modal-dialog modal-1200">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模態(tài)框（Modal）標(biāo)題222</h4>
</div>
<div class="modal-body" >在這里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-success"
data-toggle="modal" target="modal"
data-target="#myModal3">模態(tài)框</button>
<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了純js+css實(shí)現(xiàn)在線時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
bootstrap select2插件用ajax來獲取和顯示數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇bootstrap select2插件用ajax來獲取和顯示數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
第一次接觸JS require.js模塊化工具，本文為大家介紹了JS模塊化工具require.js教程第一課認(rèn)識(shí)require.js，編寫require.js，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要為大家詳細(xì)介紹了Vue formData實(shí)現(xiàn)圖片上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
理解javascript定時(shí)器中的setTimeout與setInterval
這篇文章主要幫助大家學(xué)習(xí)理解javascript定時(shí)器中的setTimeout與setInterval，從實(shí)例出發(fā)進(jìn)行深入探討，感興趣的小伙伴們可以參考一下2016-02-02
如何通過JS實(shí)現(xiàn)轉(zhuǎn)碼與解碼
這篇文章主要介紹了如何通過JS實(shí)現(xiàn)轉(zhuǎn)碼與解碼,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
javascript實(shí)現(xiàn)瀑布流自適應(yīng)遇到的問題及解決方案
這篇文章主要介紹了javascript實(shí)現(xiàn)瀑布流自適應(yīng)遇到的問題及解決方案,需要的朋友可以參考下2015-01-01
Raphael帶文本標(biāo)簽可拖動(dòng)的圖形實(shí)現(xiàn)代碼
Javascript和Raphael順便學(xué)習(xí)了一下,主要是為了實(shí)現(xiàn)一個(gè)可拖動(dòng)的矩形同時(shí)矩形上還得顯示標(biāo)簽，網(wǎng)上關(guān)于這方面的知識(shí)提的很是于是本人自不量力寫了一下，感興趣的你可不要錯(cuò)過了哈，希望可以幫助到你2013-02-02
這篇文章主要為大家詳細(xì)介紹了layUI實(shí)現(xiàn)列表查詢功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
javascript jquery對(duì)form元素的常見操作詳解
下面小編就為大家?guī)硪黄猨avascript jquery對(duì)form元素的常見操作詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06