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

發(fā)布時間：2020-10-08 01:55:07 來源：腳本之家閱讀：218 作者：oldlock 欄目：web開發(fā)

上篇我提到的‘多彈窗之疊加顯示不出彈窗問題'

這里也會遇到一次性關(guān)閉所有modal引起陰影遮罩的問題，也就是所有modal都關(guān)閉了，但是主頁面仍然被陰影遮罩.

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

這里的解決辦法是

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

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

也就是只能點擊關(guān)閉按鈕，一層一層關(guān)閉，避免發(fā)生多層關(guān)閉的問題。

2.第二種在最外層的modal關(guān)閉時，手動刪除所有遮罩

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

這里好處是，保留了點擊空白自動關(guān)閉的功能

以上所述是小編給大家介紹的Bootstrap modal 多彈窗之疊加關(guān)閉陰影遮罩問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細節(jié)

猜你喜歡