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 元素上加一條 style="overflow: auto",如下:

<div class="modal fade" ... style="overflow: auto">

這樣,模態框的滾動就不依賴 body 元素的 css 規則 modal-open 了。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,814評論 1 92
  • 原文出處 http://blog.poetries.top/2016/11/19/bootstrap-review...
    前端進階之旅閱讀 7,129評論 0 42
  • 為了提高人們對自身健康的關注度,及早預防細菌的瘋狂滋長引起不同類型的疾病,本著"奉獻,友愛,輔助,進步"的志愿精神...
    Fivemooncake話梅閱讀 162評論 0 0
  • 百日目標檢視 1.每天看20頁書 2.每天寫感恩總結 3.每天讀一遍心經 本周成果(可從八大關注選擇全部或部分進行...
    珊公子520閱讀 164評論 0 0
  • 【每日必做】 1.每日記賬、檢視花費 2.規劃明日最重要三件事 3.每日總結(覺察日記) 4.每日聽書(喜馬拉雅)...
    快樂的老露閱讀 220評論 0 0