项目中运用了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>
大功告成,保存就可以,看到背景层就可以覆盖整个页面了