1. 程式人生 > >Bootstrap modal 多彈窗之疊加關閉陰影遮罩問題的解決方法

Bootstrap modal 多彈窗之疊加關閉陰影遮罩問題的解決方法

生成 trap static str blog bootstrap 我們 主頁 function

這裏也會遇到一次性關閉所有modal引起陰影遮罩的問題,也就是所有modal都關閉了,但是主頁面仍然被陰影遮罩.

這個問題從哪來的,是因為modal疊加,我們點擊窗口之外的空白部分,一次性關閉所有model,但是modal自己生成的‘.modal-backdrop‘只關閉了一個,其余的依然存在, 導致陰影遮罩.

這裏的解決辦法是

1.第一種禁用modal 點擊空白自動關閉的功能。

tempModal.modal({
  backdrop:"static"
})

也就是只能點擊關閉按鈕,一層一層關閉,避免發生多層關閉的問題。

2.第二種在最外層的modal關閉時,手動刪除所有遮罩

$("#tempModal").bind(‘hide.bs.modal‘,function
(){ $(".modal-backdrop").remove(); })

這裏好處是,保留了點擊空白自動關閉的功能

Bootstrap modal 多彈窗之疊加關閉陰影遮罩問題的解決方法