在iframe里面用模态框，如何使遮罩层占满整个屏幕

最新推荐文章于 2024-04-11 17:21:10 发布
最新推荐文章于 2024-04-11 17:21:10 发布
阅读量1.2w 收藏 6
点赞数 2
分类专栏： iframe 文章标签： iframe 模态框 遮罩层 iframe父子通信 layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoxiaoluckylucky/article/details/80084788
版权

先来一张有问题的图片

文件结构如下


一个文件是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 开启该代码可禁止点击该按钮关闭
}
})
}


xiaoxiao无脸男
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
在iframe中使bootstrap的模态框在父页面弹出问题
08-29
提供了许多实用的UI组件，包括模态框，但是当我们在使用iframe时，bootstrap的模态框就会出现问题，即模态框弹出的位置是以子页面为标准居中的，并且遮罩层也只有子页面那一部分，这将导致整个页面简直无法直视。...
在iFrame子页面里实现模态框的方法
10-18
今天小编就为大家分享一篇在iFrame子页面里实现模态框的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
iframe子页面全屏遮罩层
qq_36392571的博客
06-06 4821
这里我在百度到的思路。我有点忘记作者是谁了。当时没有保存他的路径。 思路： 在主页面中添加一个遮罩层，把iframe的定位设为绝对定位， 不过这样子会把整个iframe的页面都显示在遮罩层上，所以在iframe 在加一层遮罩层，遮住内容，只留下弹框。 注意：要添加z-index,让主页面的遮罩层在上面。 代码： 主页面： &lt...
原声js控制浏览器全屏或者退出全屏
qq_41114603的博客
09-29 1227
开启全屏 if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } //FireFox else if (document.documentElement.mozRequestFullScreen) { document.docum...
实现iframe里面的页面全屏
最新发布
青春正在燃烧的博客
04-11 960
iframe中实现点击全屏
vue框架中使用iframe内嵌网页，并且双击实现网页全屏放大
weixin_43636545的博客
11-13 3560
在vue2框架中用iframe引入第三方网页，并且实现双击全屏显示
iframe框架自适应大小/全屏显示网页框架的方法
仿站、源码搭建/迁移技术博客
06-09 6910
全页面全屏显示iframe，并且随网页和显示设备自适应，框架中的目标网页支持自适应才可以实现自适应。 本文部分内容来源于网络，转载请注明来源，如需投诉请联系我们906270629@qq.com
Layui 弹出全屏自适应
libertine的博客
06-29 781
var index =layer.open({ type: 2, area: ['100%', '100%'], fix: false, maxmin: false, shadeClose: false, shade: 0.4, closeBtn: false, content: url, title: '添加服务项目' }); layer.full(index);
在iframe 中页面中设置遮罩遮罩层
08-03
在实际应用中，遮罩层通常与弹窗、模态框等组件配合使用，例如在`right.html`, `left.html`, `top.html`中的某个操作触发遮罩层显示，然后在完成特定任务后自动关闭。你可以通过修改JavaScript代码，添加相应的事件...
HTML实现遮罩层的方法 HTML中如何使用遮罩层
09-28
接下来，我们需要使用JavaScript（在本例中使用jQuery）来控制遮罩层和加载提示的显示与隐藏。例如，当需要显示遮罩层和加载提示时，可以写入如下代码： ```javascript function showLoading() { $("#overlay")....
layui tab嵌入iframe 高度自适应
亮大大的博客
11-13 3525
--layui-body 标签内容：修改style属性 <div class="layui-body"> <div class="layui-tab" lay-filter="main" lay-allowClose="true" style="height: 100%;margin: 0px;overflow: hidden;"> ...
实现全屏遮罩的screen.js文件
06-23
实现全屏遮罩的javascript代码，很容易套用，使用方法可见 http://blog.csdn.net/zcyhappy1314/article/details/9140309
iframe子页面弹出框遮罩层问题的解决方法
baozisss的博客
09-13 7658
问题描述：iframe内的遮罩层未遮挡父级元素， 若把蒙版放在父页面，蒙版会遮挡住iframe内所有元素。 代码结构： 解决方法一：      可以使用layer框架，框架里面可以定义，具体可以查看文档。（我没使用这个框架，因为我觉得引入一个框架只为了使用其中的模态框不划算。）   解决方法二：（刚开始使用的这个方法，还是存在问题） 思路：打开子页面的同时，分别动态生成头部和左侧菜...
Vue微前端新探：iframe优雅升级，扬长避短，重获新生
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
07-17 4295
iframe是一个天然的微前端方案，但受限于跨域的严格限制而无法很好的应用，本文介绍一种基于iframe优雅实现全新的微前端方案，继承iframe的优点，补足 iframe 的缺点，让 iframe 焕发新生。
css——模态框【遮罩层的制作；信息层；往白色的块里添加表单】
upward
09-20 635
css——模态框【遮罩层的制作；信息层；往白色的块里添加表单】
如何在iframe内部弹出浮层，浮层遮罩整个浏览器
热门推荐
AngieLife
04-13 1万+
需求说明： 页面内有多级iframe嵌套； iframe内部某些按钮点击后需要弹出浮层； 浮层需要将整个浏览器窗口遮罩，且浮层位于浏览窗口中部。 解决思路： 顶层页面内预留用于显示浮层的div(命名为popdiv),且该div内有一预留的iframe，该iframe用于加载浮层内容，命名为popiframe； 提供可以直接访问浮层内容的url连接； iframe触发显示浮层事件时，通过window.
vue element-ui的嵌套dialog遮罩层
weixin_43823766的博客
06-28 1万+
vue element-ui的嵌套dialog遮罩层打开dialog时，遮罩层直接将全部body遮住内嵌dialog关闭时父级dialog依旧被遮罩层遮住 自己做项目时需要用到嵌套dialog，但是遮罩层的问题踩了2次坑，自己解决办法如下 打开dialog时，遮罩层直接将全部body遮住 这里需要加一句 :modal-append-to-body=‘false’ 就可以解决遮罩层罩住整个body...
如何把循环的按钮都添加模态框_【iOS 12人机交互指南】2.3-模态
weixin_39946266的博客
11-22 77
该系列是iOS12人机交互指南的翻译，翻译的过程中加深自己的理解。模态通过阻止用户在完成任务、删除消息或视图之前做其他事情来制造焦点，常见的形势有操作列表、警告和行为视图。当模态视图出现在屏幕上时，用户必须通过点击按钮或退出模态来做出选择。一些应用程序中的模态视图有：在日历中编辑事件或在Safari中选择书签。模态视图可以占据整个屏幕、整个父视图(例如弹窗)或屏幕的一部分。模态视图通常包括完成和取...
iframe无法沾满整个屏幕
09-08
引用提到了关于iOS设备上iframe无法沾满整个屏幕的解决方法。因此，在iOS设备上，要使iframe沾满整个屏幕，可以参考以下解决方法： 1. 使用CSS样式：在iframe元素上应用CSS样式，设置其宽度和高度为100%，并将其他可能导致尺寸限制的元素（如body和html标签）的margin和padding设置为0。 ``` <style> iframe { width: 100%; height: 100%; } body, html { margin: 0; padding: 0; } </style> <iframe src="your-url"></iframe> ``` 2. 使用JavaScript动态设置iframe的宽度和高度：通过JavaScript获取浏览器窗口的宽度和高度，然后将这些值设置给iframe元素的宽度和高度属性，以实现全屏效果。 ``` <script> var iframe = document.getElementById("your-iframe-id"); iframe.style.width = window.innerWidth + "px"; iframe.style.height = window.innerHeight + "px"; </script> <iframe id="your-iframe-id" src="your-url"></iframe> ``` 3. 使用viewport meta标签：在网页的head标签中添加viewport meta标签，设置width=device-width, initial-scale=1.0，以确保网页在iOS设备上以全屏展示。 ``` <meta name="viewport" content="width=device-width, initial-scale=1.0"> <iframe src="your-url"></iframe> ``` 这些方法可以帮助您在iOS设备上使iframe元素沾满整个屏幕。请根据您的具体需求选择适合的方法进行实现。<span class="em">1</span><span class="em">2</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值