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

遇到的问题

最近在使用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为自定义的方法，后面给出