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