之前，遇到二級模態(tài)框問題，一直沒解決，今天看了一下，不過我還是選擇了簡單的解決辦法。

問題：一般模態(tài)框默認(rèn)的點(diǎn)擊遮罩，就會觸發(fā)close事件，從而模態(tài)框關(guān)閉。二級模態(tài)框的時(shí)候也是如此。

但是我發(fā)現(xiàn)在二級模態(tài)框周圍點(diǎn)擊遮罩時(shí)，二級模態(tài)框會關(guān)閉，但是范圍在擴(kuò)大一點(diǎn)時(shí)，一級模態(tài)框和二級模態(tài)框都會消失，但是，一級遮罩和二級遮罩都還保留在頁面上，導(dǎo)致不能進(jìn)行其它操作。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??一級模態(tài)框

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??二級模態(tài)框

后來，我認(rèn)為應(yīng)該是遮罩層面積的問題。

一級遮罩會覆蓋整個(gè)頁面，而，二級遮罩可能會小一點(diǎn)（覆蓋不完全），也不是，透明度也變了呀（這個(gè)想不明白），所以第一種方法讓整個(gè)二級模態(tài)框的層級（z-index）高于一級遮罩胎死腹中。

第二個(gè)方法，簡單粗暴；就是直接點(diǎn)擊遮罩的時(shí)候不能觸發(fā)模態(tài)框關(guān)閉，（如圖）只有點(diǎn)擊右上角的“X”或者其它（特定）按鈕的時(shí)候，才能觸發(fā)關(guān)閉事件。

下面是二級模態(tài)框

<!-- 基于bootstrap-->

<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<button type="button" href="#myM_frsubg" data-toggle="modal" data-target="#myM_frsubg" οnfοcus="this.blur()">加為好友</button>

<!-- 模態(tài)框（Modal）加好友 --> <div class="modal fade" id="myM_frsubg" tabindex="-1" role="dialog" aria-labelledby="myModalLabelfs" aria-hidden="true" data-backdrop="static"><div class="modal-dialog" style="width: 80%;"><div class="modal-content"><div class="modal-body myM_frsubg_dbody"><div><button type="button" id="myM_frsubg_close" class="close" aria-hidden="true">&times;</button></div><div class="myM_frsubg_dbody_s row"><div class="myM_frsubg_dbody_sdivf col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="../assets/images/plaza/cycle.jpg" class="media_se_fri_imgfrs"/><div style="margin: 5px"><a href="#">萌萌噠</a><span class="hx_degree">lv3</span></div><div style="margin: 5px"><span>123456hx</span></div><div><label>性別：</label><span>*</span></div><div><label>年齡：</label><span>21</span></div><div><label>所在地：</label><span>浙江&nbsp;杭州</span></div></div><div class="myM_frsubg_dbody_sse col-lg-7 col-md-7 col-sm-7 col-xs-12"><div class="myM_frsubg_dbody_sse_beiz"><label>備注：</label><span><input type="text"/></span></div><div class="myM_frsubg_dbody_sse_fenz"><label>分組：</label><span><select><option>社團(tuán)好友</option><option>我的好友</option><option>我的大學(xué)</option><option>君子之交</option></select></span></div><div><input type="checkbox"/><span>不允許此人查看我的說說</span></div></div></div><div class="myM_frsubg_dbody_sbtn"><button>確定</button></div></div></div><!-- /.modal-content --> </div><!-- /.modal --> </div> <!-- 模態(tài)框（Modal）完 -->

data-backdrop="static"就是阻止點(diǎn)擊遮罩層觸發(fā)模態(tài)框關(guān)閉的代碼，我在一級模態(tài)框和二級模態(tài)框上都加了，

即在遮罩上加個(gè)背景，就不會觸發(fā)關(guān)閉，從而避免了模態(tài)框關(guān)閉，遮罩還保留的問題，也防止有時(shí)候誤點(diǎn)，導(dǎo)致數(shù)據(jù)丟失問題。

基于實(shí)際情況，還是阻止點(diǎn)擊遮罩層觸發(fā)模態(tài)框關(guān)閉這樣好一點(diǎn)。

至于第一個(gè)猜想有待進(jìn)一步驗(yàn)證。

總結(jié)

以上是生活随笔為你收集整理的Bootstrap模态框遮罩问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。