Bootstrap的模態框遮罩在iframe子頁面彈出時不能覆蓋父頁面的解決方法
阿新 • • 發佈：2019-01-30
前段時間在做公司專案的後臺管理專案的時候，從網上下載了一個前端模板，是基於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();//隱藏模態框遮罩 }); });
以上！雖然程式碼貼的不是很完整，但主要的程式碼還是貼出來了，需要能對各位有所幫助。