快捷導(dǎo)航

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

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

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

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

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

這里的解決辦法是

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

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

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

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