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

問題：一般模態框默認的點擊遮罩，就會觸發close事件，從而模態框關閉。二級模態框的時候也是如此。

但是我發現在二級模態框周圍點擊遮罩時，二級模態框會關閉，但是范圍在擴大一點時，一級模態框和二級模態框都會消失，但是，一級遮罩和二級遮罩都還保留在頁面上，導致不能進行其它操作。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??一級模態框

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??二級模態框

后來，我認為應該是遮罩層面積的問題。

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

第二個方法，簡單粗暴；就是直接點擊遮罩的時候不能觸發模態框關閉，（如圖）只有點擊右上角的“X”或者其它（特定）按鈕的時候，才能觸發關閉事件。

下面是二級模態框

<!-- 基于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>

<!-- 模態框（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>社團好友</option><option>我的好友</option><option>我的大學</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> <!-- 模態框（Modal）完 -->

data-backdrop="static"就是阻止點擊遮罩層觸發模態框關閉的代碼，我在一級模態框和二級模態框上都加了，

即在遮罩上加個背景，就不會觸發關閉，從而避免了模態框關閉，遮罩還保留的問題，也防止有時候誤點，導致數據丟失問題。

基于實際情況，還是阻止點擊遮罩層觸發模態框關閉這樣好一點。

至于第一個猜想有待進一步驗證。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。