背景:
目前公司有两个后台系统系统a和系统b,现在的需求是将系统b中网页嵌入到系统a中,所以使用了iframe,开始在子窗口中打开的modal并不能遮住父窗口,现在已经解决。
解决思路:
包括两部分:1.打开modal,在子窗体中给要打开modal的按钮绑定事件,触发事件后将准备好的modal部分和遮罩部分插入到父窗体的body中,这样modal就能打开了(这个是在子窗体的代码中实现) 2.关闭modal,给modal中关闭modal的地方绑定事件,触发事件后移除插入的遮罩和modal(这个是在父窗体的代码中实现)
完整代码:
主页面main.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<table width="100%" height="720px" border="1" >
<tr>
<td>
左侧
</td>
<td>
<iframe name="child1" src="./child1.html" width="100%" height="100%"></iframe>
</td>
</tr>
</table>
</body>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
//关闭模态框
$("body").on("click", ".close,.myclose",function(e){
$("#backdropId").remove(); //移除遮罩
$("#pages").remove(); //关闭modal内容
});
</script>
</html>
子窗体child1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div >
<font color="#000000" size="4">
听一场摇滚,和耳朵一起一醉方休;<br />
喝一圈烈酒,让酒腻子们闻风丧胆;<br />
开一场cosplay party,二次元万岁;<br />
摸一下大蜥蜴,我熊胆威风凌厉;<br />
吃三斤驴打滚,翻滚吧肠胃;<br />
飚一把摩托车,成为风驰电掣的女王;<br />
见一下微博红人,感受马伯庸亲王的慈祥;
</font>
</div>
<button onclick="return newopenModal();">点击吧</button>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
//打开模态框方法1
function openModal(){
var fatherBody = $(window.top.document.body); //获得父窗体的body
var id = 'pages';
dialog = $('<div class="modal fade" role="dialog" id="' + id + '"/>'); //创建一个modal
dialog.appendTo(fatherBody); //把创建的modal放到父窗体的body中
dialog.load("modal.html", function() { //为模态框的主体注入内容
dialog.modal({
backdrop: false
});
});
fatherBody.append("<div id='backdropId' class='modal-backdrop fade in'></div>"); //遮罩
}
//打开模态框方法2
function newopenModal(){
var fatherBody = $(window.top.document.body); //获得父窗体的body
fatherBody.append(' \
<div class="modal fade in" id="pages" role="dialog" style="padding-left: 16px; display: block;"> \
<div class="modal-dialog"> \
<div class="modal-content"> \
<div class="modal-header"> \
<button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button> \
<h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4> \
</div> \
<div class="modal-body">在这里添加一些文本</div> \
<div class="modal-footer pp"> \
<button class="btn btn-default myclose" type="button" data-dismiss="modal">关闭</button> \
<button class="btn btn-primary" type="button">提交更改</button> \
</div> \
</div>< \
</div> \
</div>'); //为父窗体添加modal内容
fatherBody.append("<div id='backdropId' class='modal-backdrop fade in'></div>"); //为父窗体添加遮罩
}
</script>
</body>
</html>
参考:
bootstrap在iframe框架中实现由子页面在顶级页面打开模态框(modal)结:灵感来自于此,受启发并经过改造实现了上述功能
Bootstrap的模态框遮罩在iframe子页面弹出时不能覆盖父页面的解决方法 结:关闭的实现不能放在子页面,因为在遮罩打开时整个页面除了modal都是被遮住的,其它地方都不可点击
当然上述的实现方法是畸形的,如果你还没有开始着手,建议使用layui的layer,里面有iframe层的实现,我在这里也进行了实现。
完整代码:
主页面main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<table width="100%" height="720px" border="1" >
<tr>
<td>
左侧
</td>
<td>
<iframe name="child1" src="./child1.html" width="100%" height="100%"></iframe>
</td>
</tr>
</table>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
</body>
</html>
子页面child1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开始使用layer</title>
</head>
<body>
<button id="parentIframe">按钮</button>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script> <!-- 你必须先引入jQuery1.8或以上版本 -->
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script>
//弹出一个iframe层
$('#parentIframe').on('click', function(){
//iframe层
parent.layer.open({
type: 2,
title: 'layer mobile页',
shadeClose: true,
shade: 0.8,
area: ['380px', '90%'],
content: 'http://layer.layui.com/mobile' //iframe的url
});
});
</script>
</body>
</html>
显然实现一个通过子窗口打开的弹出层并将遮罩也能遮住父窗体,layer更加简洁