Bootstrap modal 多彈窗之疊加引起的滾動(dòng)條遮罩陰影問(wèn)題
上篇提到的' Bootstrap modal 多彈窗之疊加關(guān)閉陰影遮罩問(wèn)題'
我總結(jié)了下，對(duì)于modal多窗口疊加引起的遮罩，滾動(dòng)條，無(wú)法彈出窗口的問(wèn)題，查看源代碼，我總結(jié)了一種方法可以一次性解決所有這些問(wèn)題，而不影響原有modal功能，并且實(shí)現(xiàn)了多窗口疊加。
對(duì)于多窗口，如果我們將第二個(gè)，乃至第三個(gè)，第四個(gè)modal的根節(jié)點(diǎn)，移植到body下面，就不會(huì)出現(xiàn)了以上問(wèn)題。
具體該如何操作，請(qǐng)看以下代碼：
通常我們遇到多彈窗的問(wèn)題，是出現(xiàn)在modal套modal中，也就是:
<div class='fade modal' id='modal_demo' style='display:none'>
<div class='modal-dialog modal-max-lg'>
<div class='modal-content'>
<div class='modal-header'>
<button class='close' id='feature-mapping-dialog-form_close_button' type='button'>x</button>
<h4 class='modal-title'>Map Features</h4>
</div>
<div class='modal-body'>
<div>
<table>
<tr>
.....
<td>
<div class='fade modal' id='modal_demo' style='display:none'>
<div class='modal-dialog modal-max-lg'>
<div class='modal-content'>
<div class='modal-header'>
<button class='close' id='feature-mapping-dialog-form_close_button' type='button'>x</button>
<h4 class='modal-title'>Map Features</h4>
</div>
<div class='modal-body'>
...
第二個(gè)窗口是在click事件中，彈出，在第一個(gè)modal層上出現(xiàn)。這里，我們可以在common.js中寫(xiě)如下代碼:
$('#click_demo').live('click', function(e) {
$("#body").append("<div class='fade modal' id='model_dialog'/>");
$("#body").children().last().append($(this).next().html());
$("#body").children().last().modal();
});
$("#click_demo").live('hidden.bs.modal',function(){
$("#body").children().last().remove();
})
click代碼：
<div id="click_demo",class="idel",style="display:inline" >
<img alt='click details' src="/icons/demo.png" title="click to details">
<div class='fade modal' id='modal_demo' style='display:none'>
<div class='modal-dialog modal-max-lg'>
<div class='modal-content'>
<div class='modal-header'>
<button class='close' id='feature-mapping-dialog-form_close_button' type='button'>x</button>
以上所述是小編給大家介紹的Bootstrap modal 多彈窗之疊加引起的滾動(dòng)條遮罩陰影問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
使用JavaScript實(shí)現(xiàn)輪播圖特效
這篇文章主要為大家詳細(xì)介紹了使用JavaScript實(shí)現(xiàn)輪播圖特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了webpack文件打包錯(cuò)誤異常,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
JavaScript?的setTimeout與事件循環(huán)機(jī)制event-loop
這篇文章主要介紹了JavaScript?的setTimeout與事件循環(huán)機(jī)制event-loop，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
下面小編就為大家?guī)?lái)一篇獲取input標(biāo)簽的所有屬性的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
基于JavaScript實(shí)現(xiàn)評(píng)論框展開(kāi)和隱藏功能
本文通過(guò)實(shí)例代碼給大家介紹了基于JavaScript實(shí)現(xiàn)評(píng)論框展開(kāi)和隱藏功能，感興趣的朋友參考下吧2017-08-08
ES6 Array常用擴(kuò)展的應(yīng)用實(shí)例分析
這篇文章主要介紹了ES6 Array常用擴(kuò)展的應(yīng)用,結(jié)合實(shí)例形式分析各種常見(jiàn)擴(kuò)展方法針對(duì)Array數(shù)組的轉(zhuǎn)換、遍歷、查找、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
簡(jiǎn)單了解JavaScript中常見(jiàn)的反模式
這篇文章主要介紹了簡(jiǎn)單了解JavaScript中常見(jiàn)的反模式，反模式 是指對(duì)反復(fù)出現(xiàn)的設(shè)計(jì)問(wèn)題的常見(jiàn)的無(wú)力而低效的設(shè)計(jì)模式，俗話說(shuō)就是重蹈覆轍。 這篇文章描述了 JavaScript 中常見(jiàn)的一些反模式，以及避免它們的辦法。,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細(xì)介紹了OpenLayers實(shí)現(xiàn)圖層切換控件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
基于JavaScript的數(shù)據(jù)結(jié)構(gòu)隊(duì)列動(dòng)畫(huà)實(shí)現(xiàn)示例解析
這篇文章主要介紹了基于JavaScript的數(shù)據(jù)結(jié)構(gòu)隊(duì)列動(dòng)畫(huà)實(shí)現(xiàn)示例解析，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
javascript 中的try catch應(yīng)用總結(jié)
這篇文章主要介紹了javascript 中的try catch應(yīng)用總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-04-04