正文

layui弹出层layer过大被遮挡解决办法-resize事件自动调整

kstrive  kstrive  2022-10-23  737

关键词：

遇到的问题

??最近在使用layui做一个管理系统，由于前端技术有限，在开发过程中也遇到这样那样的问题，即比较简单的问题有时也要搞半天。。
??layer弹出窗口在弹出时指定了area，弹出后，如果当前页面（iframe）大小比弹出的窗口小，那么就会出现无法操作弹出窗口的尴尬情况。查看官方文档以及搜索引擎，都没有找到好的办法。如图所示：

弹出窗口比当前页面大

??这时，唯有放大整个页面才能看到完全的弹出窗口，才可以操作。

我的尝试

??我的思路时通过监听页面的resize事件，通过layer.style(layerIndex, )重新设置弹出窗口的大小和位置。

1、定义页面变量

    var layerIndex;
    var layerInitWidth;
    var layerInitHeight;

2、在layer.open的完成事件中获取窗口初始大小及窗口索引
??在success方法中取得相关值

//获取当前弹出窗口的索引及初始大小
layerIndex      = index;
layerInitWidth  = $("#layui-layer"+layerIndex).width();
layerInitHeight = $("#layui-layer"+layerIndex).height();
//此处调用是因为，初始弹出窗口时，window也可能小于窗口，这里调用一次调整，resizeLayer为自定义的方法，后面给出
utils.resizeLayer(layerIndex,layerInitWidth,layerInitHeight);

　　完整片断：

laytpl($(‘#edit-tpl‘).html()).render(d,
    function(html) 
        layer.open(
            type: 1,
            title: ‘新增‘,
            content: html,
            maxmin: true,
            area: [‘800px‘, ‘690px‘],
            btn: [‘提交‘, ‘重置‘, ‘取消‘],
            yes: function(index, layero) 
                layerIndex = index;
                $(‘form[lay-filter="form-edit"]‘).find(‘button[lay-submit]‘).click();
                return false;
            ,
            btn2: function(index, layero) 
                layerIndex = index;
                $(‘form[lay-filter="form-edit"]‘).find(‘button[type="reset"]‘).click();
                return false;
            ,
            success: function(layero, index) 
                //获取当前弹出窗口的索引及初始大小
                layerIndex      = index;
                layerInitWidth  = $("#layui-layer"+layerIndex).width();
                layerInitHeight = $("#layui-layer"+layerIndex).height();
                //utils.resizeLayer(layerIndex,layerInitWidth,layerInitHeight);
                form.render(null, ‘form-edit‘);
            
        );
    );

3、监听window的resize事件，重新设置大小
??监听window变化，调用resizeLayer方法重设置弹出窗口大小
```
    $(window).resize(function() 
        utils.resizeLayer(layerIndex,layerInitWidth,layerInitHeight);
    );　
```

4、重新设置函数
??若window比窗口小，取小的值来设置弹出窗口的大小，因为多个页面都要调用，在此封装到utils中作为一个函数来调用

resizeLayer:function (layerIndex,layerInitWidth,layerInitHeight) 
    var docWidth = $(document).width();
    var docHeight = $(document).height();
    var minWidth = layerInitWidth > docWidth ? docWidth : layerInitWidth;
    var minHeight = layerInitHeight > docHeight ? docHeight : layerInitHeight;
    console.log("doc:",docWidth,docHeight);
    console.log("lay:",layerInitWidth,layerInitHeight);
    console.log("min:",minWidth,minHeight);
    layer.style(layerIndex, 
        top:0,
        width: minWidth,
        height:minHeight
    );

5、效果

初始时窗口比window小的情况，自动适应了

调整window大小，自动适应

window正常情况下，窗口使用原始设置的大小

总结

??初学layui做项目，前端也不熟悉，只有先这样解决了，各位有好的方法欢迎留言，谢谢！

layer弹出层如何在视频全屏显示？

视频全屏后，layer的弹窗被遮挡了，请问大佬如何解决参考技术A被遮挡就是显示层级的问题，z-index属性可以控制查看详情

layer/layui弹出层插件bug

<buttonclass="layui-btn"lay-submitlay-filter="formDemo"id="layui-btn"type="submit">立即提交</button>使用layer/layui弹出层插件,type="submit"时,弹出层失效,改为type="button"时正常弹出; 查看详情

layui弹出层怎么不显示

在使用layer的过程中，明明引入了文件，但是却说iisnotdefine这是因为layer是用jquery进行封装的，如果不把jquery的引如文件放入layer.js前面就会出现这种错误。解决方法：将jquery的引入放到layer的前面，建议将jquery最新引入，防止出... 查看详情

adminlte+layui框架搭建3-layui弹出层(代码片段)

...jquery;)</script>so，我tab层的iframe全部都是使用这个layer弹出（layui不推荐这样使用），这样可以做是为了避免tab页中iframe的弹出层的嵌页效果，当然也可以在子页面使用layer=layui.layer（页面弹出层）1<script>2layui.use([‘table‘... 查看详情

牛逼的弹出层layer！！！

功能强大，实用，操作方便，文档齐全。http://www.layui.com/doc/modules/layer.html 常用功能代码：<!doctypehtml><html><head><metacharset="utf-8"><title>layer-更懂你的web弹窗解决方案</title>< 查看详情

layer关闭弹出层，弹出打印(代码片段)

常规的话，下面能够完成关闭弹出层varindex=parent.layer.getFrameIndex(window.name);//延迟关闭解决打印窗口弹不出来的情况parent.layer.close(index);可是当这里需要关闭的同时弹出打印窗口的时候，就会发现失效了，能关闭，可是打印窗口同... 查看详情

layui弹出层layer.open中的content问题

如果content取的的事当前页面元素内容时，type类型应该为1layer.open(type:1,title:‘内容区域‘, content:$(‘#DIV_EditUserInfo‘), //设置跳转的div，跳转到对应的页面area:["920px","250px"],);如果content取的的路径，或者某个... 查看详情

layui弹出层日期和时间选择即时通讯分页

Layui弹出层、日期和时间选择、即时通讯、分页弹层组件文档-layui.layer对于弹出层的感觉是：layer至今仍作为layui的代表作，她的受众广泛并非偶然，而是这数年来的坚持、不弃的执念，将那些不屑的眼光转化为应得的尊重，不断... 查看详情

jq插件—弹出层layer.js

layer.js包含了所有的层级情形，并且附加的有：tab层，相册层、webIM层。适用于移动版本的layer.js 为layerformobile配套的layui非常适合用于后台系统的ui框架。用法在官网都有说明：参见http://layer.layui.com/ 文档手册另外它... 查看详情

layer弹出层的关闭问题

...后台进行处理，这时候添加成功之后最理想的状态是关闭弹出层并且刷新列表的数据信息，之前一直想实现这样，可一直没有成功，今天决定好好弄一弄，在仔细看过layer的帮助手册以及查阅资料之后，有了以下的解决办法：一... 查看详情

layer弹出层的关闭问题

layui弹出层type=2无法正常验证问题

思路：在弹出层页面form表单中增加一个隐藏的提交按钮，当弹出层点击确定按钮时，触发弹出层页面中的隐藏按钮，触发提交校验弹出层脚本如下：functionLoadDemo(id)layer.open(title:‘弹出层标题‘,//弹出层标题type:2,content:‘demo.shtml... 查看详情

layui弹出层详解

今天空了学习一下弹出层还是一步步展示把首先，layer可以独立使用，也可以通过Layui模块化使用。我个人一直是用的模块化的所以下面素有的都是基于模块化的。引入好相关文件就可以开始啦今天放图片把试着学一下放图... 查看详情

layer框架弹出层

layer弹出层弹出后确定按钮无法点击，报错UncaughtTypeError:Cannotreadproperty'layer'ofnull这个问题怎么解决？...layer弹出层弹出后确定按钮无法点击，报错UncaughtTypeError:Cannotreadproperty'layer'ofnull这个问题怎么解决？展开参考技... 查看详情

0724日重点:layer弹出层插件

官网:http://layer.layui.com/layer.msg(‘添加规则成功‘,{icon:1,time:‘1200‘}) layer.msg(‘警告‘,{icon:5,time:‘1200‘}) layer.msg("失败", { &nbs 查看详情

layui修改页面layer.open弹出层给子页面标签赋值(代码片段)

修改页面layer.open弹出层给子页面标签赋值欢迎使用Markdown编辑器欢迎使用Markdown编辑器//监听工具条table.on('tool(auth-table)',function(obj)vardata=obj.data;varlayEvent=obj.event;if(layEvent==='edit')varindex=layer.open(title:... 查看详情

css样式冲突问题

...出现样式冲突问题，解决办法如下：解决：以layer.js中弹出层 .layui-layer-page.layui-layer-content样式为例源文件 .layui-layer-page.layui-layer-content样式如下：.layui-layer-page.layui-layer-content{positio 查看详情

解决弹出层打印问题

jsp页面使用了一个layer插件来做弹出层；并且要求打印弹出层里面的内容。直接使用window.print()方法打印不出所有的页面内容，仅仅是打印了当前屏幕内容。我的解决办法是获取body中所有代码，新建一个空白页面，调用document.writ... 查看详情