bootstrap多層模態(tài)框滾動(dòng)條消失的問(wèn)題
bootstrap 打開(kāi)多層模態(tài)框的情況下,關(guān)閉任意一個(gè)模態(tài)框,都會(huì)導(dǎo)致其余模態(tài)框的滾動(dòng)條消失。
監(jiān)測(cè)html發(fā)現(xiàn),當(dāng)打開(kāi)模態(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 也就沒(méi)有了,所以模態(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)文章
淺析JSONP技術(shù)原理及實(shí)現(xiàn)
這篇文章主要介紹了淺析JSONP技術(shù)原理及實(shí)現(xiàn) 的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
JS判斷傳入函數(shù)的參數(shù)是否為空(函數(shù)參數(shù)是否傳遞)
這篇文章主要介紹了JS判斷傳入函數(shù)的參數(shù)是否為空(函數(shù)參數(shù)是否傳遞),需要的朋友可以參考下2023-05-05
基于three.js編寫(xiě)的一個(gè)項(xiàng)目類示例代碼
這篇文章主要給大家介紹了關(guān)于基于three.js編寫(xiě)的一個(gè)項(xiàng)目類的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
JavaScript實(shí)現(xiàn)將UPC轉(zhuǎn)換成ISBN的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)將UPC轉(zhuǎn)換成ISBN的方法,涉及javascript字符串操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
詳解JavaScript面向?qū)ο髮?shí)戰(zhàn)之封裝拖拽對(duì)象
本文主要介紹了JavaScript如何用面向?qū)ο蟮姆绞椒庋b拖拽對(duì)象,通過(guò)3種方式來(lái)實(shí)現(xiàn),幫助讀者更好的理解其原理2021-06-06

