Bootstrap的模态框遮罩在iframe子页面弹出时不能覆盖父页面的解决方法

来源：互联网发布：微信公众号淘宝客编辑：程序博客网时间：2024/05/20 21:20

前段时间在做公司项目的后台管理项目的时候，从网上下载了一个前端模板，是基于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();//隐藏模态框遮罩});});

以上！虽然代码贴的不是很完整，但主要的代码还是贴出来了，需要能对各位有所帮助。

2 1