新聞中心
這篇文章將為大家詳細(xì)講解有關(guān)bootstrap如何解決多層模態(tài)框滾動條消失的問題,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
bootstrap 打開多層模態(tài)框的情況下,關(guān)閉任意一個(gè)模態(tài)框,都會導(dǎo)致其余模態(tài)框的滾動條消失。
監(jiān)測html發(fā)現(xiàn),當(dāng)打開模態(tài)框時(shí),會給 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)關(guān)閉任何一個(gè)模態(tài)框時(shí),body 元素的 css 規(guī)則 modal-open 會被移除掉,自然 overflow-y:auto 也就沒有了,所以模態(tài)框的滾動條就消失了。
解決方案是在模態(tài)框的 div 元素上加一條 ,如下:
這樣,模態(tài)框的滾動就不依賴 body 元素的 css 規(guī)則 modal-open 了。
實(shí)例
popover-page-id="CS040104">模態(tài)框(Modal)標(biāo)題222
在這里添加一些文本關(guān)于“bootstrap如何解決多層模態(tài)框滾動條消失的問題”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯(cuò),請把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
當(dāng)前標(biāo)題:bootstrap如何解決多層模態(tài)框滾動條消失的問題-創(chuàng)新互聯(lián)
標(biāo)題URL:http://fisionsoft.com.cn/article/dgcdsi.html