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

更新時間：2017年02月27日 11:51:36 作者：oldlock

這里也會遇到一次性關(guān)閉所有modal引起陰影遮罩的問題，也就是所有modal都關(guān)閉了，但是主頁面仍然被陰影遮罩。下面通過本文給大家分享解決方案，需要的朋友參考下吧

這里也會遇到一次性關(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)站的支持！

您可能感興趣的文章:

相關(guān)文章

JavaScript中Array實例方法map的實現(xiàn)方法
這篇文章主要介紹了JavaScript中Array實例方法map的實現(xiàn)方法,map() 方法創(chuàng)建一個新數(shù)組,其結(jié)果是原數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下
2024-03-03
BootStrap 頁簽切換失效的解決方法
bootstrap開發(fā)標(biāo)簽頁時，標(biāo)簽頁顯示正常，但點擊時候?qū)?yīng)內(nèi)容區(qū)域沒有變化。接下來通過本文給大家分享BootStrap 頁簽切換失效的解決方法，感興趣的朋友一起看看吧
2017-08-08
uniapp小程序配置tabbar底部導(dǎo)航欄實戰(zhàn)指南
tabBar如果應(yīng)用是一個多tab應(yīng)用,可以通過tabBar配置項指定tab欄的表現(xiàn),以及tab切換時顯示的對應(yīng)頁,下面這篇文章主要給大家介紹了關(guān)于uniapp小程序配置tabbar底部導(dǎo)航欄的相關(guān)資料,需要的朋友可以參考下
2022-09-09
深入學(xué)習(xí)JavaScript中的promise
這篇文章主要介紹了深入學(xué)習(xí)JavaScript中的promise，Promise對象的主要?途是通過鏈?zhǔn)秸{(diào)?的結(jié)構(gòu)，將原本回調(diào)嵌套的異步處理流程，轉(zhuǎn)化成“對象.then().then()...”的鏈?zhǔn)浇Y(jié)構(gòu)
2022-06-06
js 模塊化CommonJS AMD UMD CMD ES6規(guī)范詳解
這篇文章主要為大家介紹了js 模塊化CommonJS AMD UMD CMD ES6規(guī)范詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
javascript實現(xiàn)在某個元素上阻止鼠標(biāo)右鍵事件的方法和實例
這篇文章主要介紹了javascript實現(xiàn)在某個元素上阻止鼠標(biāo)右鍵事件的方法和實例,需要的朋友可以參考下
2014-08-08
分享JavaScript監(jiān)聽全部Ajax請求事件的方法
最近在做一個小項目，引入了第三方j(luò)s文件，這個文件會調(diào)用XMLHttpRequest向服務(wù)器發(fā)送 Ajax請求，但是我有需要監(jiān)聽其Ajax請求的某些事件，以便額外地執(zhí)行其他腳本。于是稍微看了看監(jiān)聽 Ajax請求的事件方法，在這里分享給大家。有需要的朋友們可以參考借鑒。
2016-08-08
javascript的漸進(jìn)增強(qiáng)與平穩(wěn)退化淺談
2013-11-11
淺談一個webpack構(gòu)建速度優(yōu)化誤區(qū)
這篇文章主要介紹了淺談一個webpack構(gòu)建速度優(yōu)化誤區(qū)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-06-06
js改變img標(biāo)簽的src屬性在IE下沒反應(yīng)的解決方法
在Chrome FF里都能改變成功，但在IE下卻不行，網(wǎng)上搜了半天，大概了解了，這個是IE的一個bug，具體的解決方法如下，有類似問題的朋友可以參考下哈，希望對大家有所幫助
2013-07-07