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

最新推荐文章于 2024-04-23 03:20:59 发布
最新推荐文章于 2024-04-23 03:20:59 发布
阅读量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 中页面中设置遮罩遮罩层
08-03
NULL 博文链接：https://gjp014.iteye.com/blog/2001946
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
11-26
` - 这确保了遮罩层覆盖整个屏幕。 2. `background-color: #000;` - 设置背景颜色为黑色，这将是遮罩的基础颜色。 3. `filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;` - 这三个属性共同作用，使得...
解决 iframe 弹框蒙板显示不了全屏
月来better
02-03 1751
解决 iframe 弹框蒙板显示不了全屏问题
Bootstrap 显示模态框
最新发布
rfhntn的博客
04-23 949
上述知识点，囊括了目前互联网企业的主流应用技术以及能让你成为“香饽饽”的高级架构知识，每个笔记里面几乎都带有实战内容。很多人担心学了容易忘，这里教你一个方法，那就是重复学习。打个比方，假如你正在学习 spring 注解，突然发现了一个注解@Aspect，不知道干什么用的，你可能会去查看源码或者通过博客学习，花了半小时终于弄懂了，下次又看到@Aspect 了，你有点郁闷了，上次好像在哪哪哪学习，你快速打开网页花了五分钟又学会了。从半小时和五分钟的对比中可以发现多学一次就离真正掌握知识又近了一步。
iframe子页面全屏遮罩层
qq_36392571的博客
06-06 4835
这里我在百度到的思路。我有点忘记作者是谁了。当时没有保存他的路径。 思路： 在主页面中添加一个遮罩层，把iframe的定位设为绝对定位， 不过这样子会把整个iframe的页面都显示在遮罩层上，所以在iframe 在加一层遮罩层，遮住内容，只留下弹框。 注意：要添加z-index,让主页面的遮罩层在上面。 代码： 主页面： &lt...
原声js控制浏览器全屏或者退出全屏
qq_41114603的博客
09-29 1238
开启全屏 if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } //FireFox else if (document.documentElement.mozRequestFullScreen) { document.docum...
vue框架中使用iframe内嵌网页，并且双击实现网页全屏放大
weixin_43636545的博客
11-13 3584
在vue2框架中用iframe引入第三方网页，并且实现双击全屏显示
怎样在一个Iframe里面打开一个层使它占满整个浏览器的窗口
yanyi0909的专栏
04-07 1691
怎样在一个Iframe里面打开一个层使它占满整个浏览器的窗口             注意不是占满Iframe的整个窗口   而是父页面   也就是整个浏览器的窗口
jquery弹出层 jquery弹出层 jquery弹出层
08-12
标题“jquery弹出层”暗示我们将会探讨的是如何使用jQuery来实现网页上的弹出层效果，这在网页设计中是非常常见的一种功能，用于显示警告、信息、确认对话框或者复杂的模态窗口。 首先，让我们理解什么是弹出层。弹...
JavaScript弹出层
05-19
Layer提供了丰富的配置选项，包括`title`、`content`、`area`（弹出层大小）、`offset`（定位方式）、`shade`（遮罩层透明度）、`btnAlign`（按钮对齐方式）等，可以根据需求进行定制。 6. **API接口** Layer还...
弹出登录框的实现代码，优化版
11-19
2. CSS样式：定义模态窗口的定位（fixed）、大小、背景颜色、透明度，以及遮罩层的样式，确保它覆盖整个页面但不阻挡交互。 3. JavaScript逻辑：添加事件监听器，当点击登录按钮时，验证表单数据；点击关闭按钮或...
JQuery.BlockUI 弹出层
09-24
jQuery.BlockUI的核心功能在于能够阻止用户对页面的进一步操作，创建一种锁定屏幕的效果，同时可以自定义显示的内容和样式，比如添加模态对话框或者IFrame。原版插件大小只有16k，经过压缩后更是减小到10k左右，这...
iframe框架自适应大小/全屏显示网页框架的方法
仿站、源码搭建/迁移技术博客
06-09 6930
全页面全屏显示iframe，并且随网页和显示设备自适应，框架中的目标网页支持自适应才可以实现自适应。 本文部分内容来源于网络，转载请注明来源，如需投诉请联系我们906270629@qq.com
实现iframe里面的页面全屏
青春正在燃烧的博客
04-11 1073
iframe中实现点击全屏
jquery3和layui冲突导，致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
weixin_30577801的博客
05-11 352
项目中使用的jquery版本是jquery-3.2.1，在使用layui弹出全屏iframe窗口时，iframe窗口顶部总是出现一个152px高的滚动窗口无法实现真正全屏，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="...
layui tab嵌入iframe 高度自适应
亮大大的博客
11-13 3532
--layui-body 标签内容：修改style属性 <div class="layui-body"> <div class="layui-tab" lay-filter="main" lay-allowClose="true" style="height: 100%;margin: 0px;overflow: hidden;"> ...
Layui 弹出全屏自适应
libertine的博客
06-29 785
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);
vue 如何在iframe中显示一个全屏的弹窗
笋笋的博客
08-16 1208
将组件挂载到body中 var OpenScanPayPopup = Vue.extend({ template: "#openPayPopup", data: function () { return { info: null } } }) var vm = new Vue({ data: function () { return { .
iframe窗口添加关闭按钮
weixin_30776863的博客
05-13 2617
注意是：layer弹窗 ll <button class="btn btn-danger" onclick="javascript:closethis()"><i class="icon-remove icon-white"></i> Delete</button> <!-- 按钮的单击事件 --> <...
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、付费专栏及课程。

余额充值