前段時間在做公司項目的后臺管理項目的時候，從網上下載了一個前端模板，是基于bootstrap的。之前也用過bootstrap的模態框，用的是Ace Admin的前端模板。也用了iframe，但并沒有遇到子頁面的模態框遮罩不能覆蓋父頁面的問題。這次既然遇到了，就小記一下，也許并不一定有用，但也希望能幫到各位。
我也是借鑒的網上資源自己修改出來的。之前一直把模態框寫在了子頁面中，幾經折騰后還是把模態框和模態框遮罩移到了iframe的父頁面中，以后iframe的子頁面需要彈出模態框的時候，直接調用這個模態框就可以了。調用模態框的同時，需要將遮罩也顯示出來。簡要代碼如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="CSS/bootstrap.css" /> </head> <body> <div>.....</div> <!-- 統一調用的模態框 --> <div class="modal fade" role="dialog" id="myModal" aria-hidden="true"></div> <!-- 模態框遮罩 --> <div id='backdropId' class='modal-backdrop fade in' style='display:none;'></div> </body></html>此時，模態框的遮罩是隱藏的。然后就是iframe子頁面的按鈕點擊觸發彈出模態框，同時讓模態框的遮罩顯示出來。以下是簡要的js代碼，按鈕id為：chooseIndex
$(function() { /*----------點擊按鈕打開模態框------------*/ $("#chooseIndex").click(function(){ var fatherBody = $(window.top.document.body);//找到父頁面的body對象 var dialog = parent.$('#myModal'); dialog.load("modal/leadDesktopModal.html", function() { dialog.modal({ backdrop: false }); }); //顯示模態框背景遮罩，遮罩位于index.html頁面 fatherBody.find("#backdropId").show(); });});需要注意的是，模態框的頁面需要單獨提出來寫成一個html頁面，然后再在直接調用這個模態框就可以了。然后是關閉模態框的同時也需要將模態框的遮罩一同隱藏掉。這個我也是幾經折騰后才選擇在模態框頁面加入隱藏遮罩的js代碼，其他地方的時機都不對，不能有效關閉遮罩。一下是模態框頁面中的js代碼：
$(function(){ $(".closeModal").click(function(){ var fatherBody = $(window.top.document.body); fatherBody.find("#backdropId").hide();//隱藏模態框遮罩 });});以上！雖然代碼貼的不是很完整，但主要的代碼還是貼出來了，需要能對各位有所幫助。
新聞熱點
疑難解答
