您的位置：首页 > Web前端 > BootStrap

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

2017-02-04 10:12 666 查看
前段时间在做公司项目的后台管理项目的时候，从网上下载了一个前端模板，是基于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();//隐藏模态框遮罩
});
});
以上！虽然代码贴的不是很完整，但主要的代码还是贴出来了，需要能对各位有所帮助。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  bootstrap 前端 iframe 模态框
相关文章推荐
新的分享
章节导航