Bootstrap modal 多彈窗之疊加引起的滾動(dòng)條遮罩陰影問題
上篇提到的' Bootstrap modal 多彈窗之疊加關(guān)閉陰影遮罩問題'
我總結(jié)了下,對(duì)于modal多窗口疊加引起的遮罩,滾動(dòng)條,無法彈出窗口的問題,查看源代碼,我總結(jié)了一種方法可以一次性解決所有這些問題,而不影響原有modal功能,并且實(shí)現(xiàn)了多窗口疊加。
對(duì)于多窗口,如果我們將第二個(gè),乃至第三個(gè),第四個(gè)modal的根節(jié)點(diǎn),移植到body下面,就不會(huì)出現(xiàn)了以上問題。
具體該如何操作,請(qǐng)看以下代碼:
通常我們遇到多彈窗的問題,是出現(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中寫如下代碼:
$('#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)條遮罩陰影問題,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
使用JavaScript實(shí)現(xiàn)輪播圖特效
這篇文章主要為大家詳細(xì)介紹了使用JavaScript實(shí)現(xiàn)輪播圖特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09JavaScript?的setTimeout與事件循環(huán)機(jī)制event-loop
這篇文章主要介紹了JavaScript?的setTimeout與事件循環(huán)機(jī)制event-loop,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-07-07基于JavaScript實(shí)現(xiàn)評(píng)論框展開和隱藏功能
本文通過實(shí)例代碼給大家介紹了基于JavaScript實(shí)現(xiàn)評(píng)論框展開和隱藏功能,感興趣的朋友參考下吧2017-08-08ES6 Array常用擴(kuò)展的應(yīng)用實(shí)例分析
這篇文章主要介紹了ES6 Array常用擴(kuò)展的應(yīng)用,結(jié)合實(shí)例形式分析各種常見擴(kuò)展方法針對(duì)Array數(shù)組的轉(zhuǎn)換、遍歷、查找、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06基于JavaScript的數(shù)據(jù)結(jié)構(gòu)隊(duì)列動(dòng)畫實(shí)現(xiàn)示例解析
這篇文章主要介紹了基于JavaScript的數(shù)據(jù)結(jié)構(gòu)隊(duì)列動(dòng)畫實(shí)現(xiàn)示例解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08javascript 中的try catch應(yīng)用總結(jié)
這篇文章主要介紹了javascript 中的try catch應(yīng)用總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-04-04