在iframe里面用模态框，如何使遮罩层占满整个屏幕
先来一张有问题的图片
文件结构如下
一个文件是index.html里面的
DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
title
>
<
link
rel=
"stylesheet"
href=
"./layui/css/layui.css"
>
<
style
>
html,body {
width:
100%;
height:
100%;
}
.side_left {
height:
100%;
}
.message {
margin:
-8px
28px
0
!important;
border-radius:
50%;
top:
31%
!important;
}
.title {
position:
absolute
!important;
/* left: 200px; */
top:
0;
color
:
#fff
;
padding:
0
20px;
line-height:
60px;
font-size:
22px;
font-weight:
600;
}
.content {
top:
60px;
}
.content_iframe {
width:
100%;
height:
100%;
}
.side_left,.top_nav{
border:
5px
solid
blue;
}
<
/
style
>
head
>
<
body
>
<
nav
class=
"ayui-layout-admin top_nav"
style=
"height:60px;background:#393D49;"
>
<
h1
class=
"title"
>后台管理系统
h1
>
<
ul
class=
"layui-nav layui-layout-right"
>
<
li
class=
"layui-nav-item"
>
<
a
href=
"#"
>通知
<
span
class=
"layui-badge message"
>9
span
>
a
>
li
>
<
li
class=
"layui-nav-item"
>
<
a
href=
"#"
>退出
a
>
li
>
<
li
class=
"layui-nav-item"
>
li
>
ul
>
nav
>
<
ul
class=
"layui-nav layui-nav-tree layui-inline side_left"
>
<
li
class=
"layui-nav-item layui-this"
>
<
a
href=
"./index.html"
>
<
i
class=
"iconfont icon-shouye1"
>
i
>
首页
a
>
li
>
<
li
class=
"layui-nav-item layui-nav-itemed"
id=
"changeToSet"
>
<
a
href=
"javascript:;"
>
<
i
class=
"iconfont icon-shouye1"
>
i
>
基础设置
a
>
li
>
ul
>
<
div
class=
"layui-body content"
>
<
iframe
src=
"./main.html"
frameborder=
"0"
id=
"contentIframe"
class=
"content_iframe"
>
iframe
>
div
>
div
>
<
script
src=
"./jquery-3.2.1.min.js"
>
<
/
script
>
<
script
src=
"./layui/layui.js"
>
<
/
script
>
body
>
html
>
main.html的代码如下
DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
title
>
<
link
rel=
"stylesheet"
href=
"./layui/css/layui.css"
>
<
style
>
.show_modal {
margin:
30px;
}
<
/
style
>
head
>
<
body
>
<
h1
>这是首页标题
h1
>
<
p
>你好，我是首页页面内容
p
>
<
button
id=
"showModal"
class=
"show_modal"
>点击出现模态框
button
>
<
script
src=
"./jquery-3.2.1.min.js"
>
<
/
script
>
<
script
src=
"./layui/layui.js"
>
<
/
script
>
<
script
>
$(
function(){
$(
'#showModal').
on(
'click',
function(){
layui.
use(
'layer',
function(){
var
layer =
layui.
layer;
layer.
open({
title:
'在线调试'
,
content:
'可以填写任意的layer代码'
});
});
})
})
<
/
script
>
body
>
html
>
这是用iframe，但是按钮的时候会出现一个模态框，需求是模态框的遮罩层占满整个屏幕，但是不论我怎么调，遮罩层只能占满iframe（即图中红色框区域），并不能占满整个屏幕。
解决办法是1，在父元素页面里面定义方法，然后在子元素子页面调用父元素的方法，即可实现遮罩层占满屏幕。
即在index.html里面定义方法
function
modal1(){
layui.
use(
'layer',
function(){
var
layer =
layui.
layer;
layer.
open({
title:
'在线调试'
,
content:
'可以填写任意的layer代码'
});
});
}
然后在main.html里面调用父元素的方法
$(
function(){
$(
'#showModal').
on(
'click',
function(){
parent.
modal1();
})
})
即可实现遮罩层占满整个屏幕
解决办法是2,推荐用这种方法，下面是封装的一个函数，参数详细解释请点击http://fly.layui.com/docs/2/里的弹层layer;注意：此方法是在父元素定义，在子页面调用parent.layerOpen({})里面传入参数即可，实例参数里的content:'./setting.html' ，那么调用此函数会跳转到setting.html页面，相应的逻辑和样式写在setting.html即可。
function
layerOpen(
obj) {
layer.
open({
type:
obj.
type ||
2,
title:
obj.
title,
scrollbar:
obj.
scrollbar ||
false,
closeBtn:
obj.
closeBtn,
//关闭按钮是否显示
shade:
obj.
shade ||
0.3,
shadeClose:
obj.
shadeClose ||
true,
skin:
obj.
skin ||
'layui-layer-demo',
//加上边框,
area:
obj.
area || [
'600px',
'400px'],
content:
obj.
content,
btn:
obj.
btn,
yes
:
function (
index,
layero) {
if (
obj.
btn1Callback) {
obj.
btn1Callback()
}
//按钮【按钮一】的回调
},
btn2
:
function (
index,
layero) {
if (
obj.
btn2Callback) {
obj.
btn2Callback()
}
//按钮【按钮二】的回调
//return false 开启该代码可禁止点击该按钮关闭
}
})
}