前段时间在做公司项目的后台管理项目的时候，从网上下载了一个前端模板，是基于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();//隐藏模态框遮罩 });});以上！虽然代码贴的不是很完整，但主要的代码还是贴出来了，需要能对各位有所帮助。
新闻热点
疑难解答
