项目中运用了iframe,子页面显示。但是在使用layui的插件时,弹出层背景自覆盖当前的iframe区域,并不是覆盖了整个页面。
要实现覆盖整个页面,这里就需要用到layui中的方法,parent.layer.open({})。在父级页面打开弹出层。具体操作如下:
注意:在外面的父级页面和iframe里面的子页面都需要,引用layui.js和layui.css
第一步:子页面中调用parent.layer.open({})方法,填写对应参数。我项目中的弹出的数据,是ajax后台请求回来的:
$.ajax({ type:"get", url:weburl+"/suggestions?id="+questionId, async:true, success:function(data){ //debugger; var queData = data.prg_content; layui.use('layer', function(){ var layer = layui.layer; parent.layer.open({ //在父窗口打开 type: 1, title: '问题描述', shadeClose:true, area: ['420px', '240px'], content: "<p class='questionInfor'>"+queData+"</p>" }); }); } });第二步:在父页面调用弹出层layer
<script type="text/javascript" src="layui/layui.js" ></script> <script> layui.use('layer', function(){ var layer = layui.layer; }); </script>大功告成,保存就可以,看到背景层就可以覆盖整个页面了