先来一张有问题的图片
文件结构如下
一个文件是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（即图中红色框区域），并不能占满整个屏幕。
解决办法是，在父元素页面里面定义方法，然后在子元素子页面调用父元素的方法，即可实现遮罩层占满屏幕。
即在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();
})
})