使用iframe的网页在子窗体中打开modal并将遮罩遮住父窗体

背景：

目前公司有两个后台系统系统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 ο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>

参考：

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更加简洁

龙卷风zc

发布了25 篇原创文章 · 获赞 2 · 访问量 2万+

私信关注

使用iframe的网页在子窗体中打开modal并将遮罩遮住父窗体

猜你喜欢