background:
At present, the company has two back-end systems, system a and system b. The current requirement is to embed the web page in system b into system a. Therefore, iframe is used, and the modal opened in the child window cannot cover the parent window. solve.
Solutions:
There are two parts: 1. Open the modal, bind the event to the button to open the modal in the sub-form, after the event is triggered, insert the prepared modal part and the mask part into the body of the parent form, so that the modal can Opened (this is implemented in the code of the child form) 2. Close the modal, bind the event to the place where the modal is closed in the modal, remove the inserted mask and modal after the event is triggered (this is the code in the parent form Implemented in)
Complete code:
Main page 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>Child form 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 οnclick="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>reference:
Bootstrap is implemented in the iframe framework. The modal knot is opened by the subpage on the top page : the inspiration comes from this, inspired and modified to achieve the above function
Bootstrap's modal frame mask cannot cover the parent page when the iframe subpage pops up. The implementation of the closure cannot be placed on the subpage, because the entire page is blocked except for modal when the mask is opened. None clickable
Of course, the above implementation method is deformed. If you have not started, it is recommended to use the layui layer , which has the iframe layer implementation, which I have also implemented here.
Complete code:
Main page 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>Child page 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>Obviously, a pop-up layer opened through the child window and the mask can also cover the parent form, the layer is more concise
