bootstrap如何解決多層模態框滾動條消失的問題-創新互聯
這篇文章將為大家詳細講解有關bootstrap如何解決多層模態框滾動條消失的問題,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
bootstrap 打開多層模態框的情況下,關閉任意一個模態框,都會導致其余模態框的滾動條消失。
監測html發現,當打開模態框時,會給 body 元素加一個 modal-open 的 class,而在 bootstrap.css 中,有這樣一條 css 規則:
.modal-open .modal {overflow-x:hidden; overflow-y:auto}
因為有 overflow-y:auto,所以模態框才可以滾動,而當關閉任何一個模態框時,body 元素的 css 規則 modal-open 會被移除掉,自然 overflow-y:auto 也就沒有了,所以模態框的滾動條就消失了。
解決方案是在模態框的 div 元素上加一條 ,如下:
這樣,模態框的滾動就不依賴 body 元素的 css 規則 modal-open 了。
實例
popover-page-id="CS040104">