layui弹出层layer过大被遮挡解决办法

 时间:2026-02-14 16:58:19

1、如下图所示,弹出层被遮挡了,无法操作,这时,唯有放大整个页面才能看到完全的弹出窗口,才可以操作。

layui弹出层layer过大被遮挡解决办法

2、我的解决办法是:

1、定义页面变量

   var layerIndex;

   var layerInitWidth;

   var layerInitHeight;

2、在layer.open的完成事件中获取窗口初始大小及窗口索引

//获取当前弹出窗口的索引及初始大小

layerIndex      = index;

layerInitWidth  = $("#layui-layer"+layerIndex).width();

layerInitHeight = $("#layui-layer"+layerIndex).height();

//此处调用是因为,初始弹出窗口时,window也可能小于窗口,这里调用一次调整,resizeLayer为自定义的方法,后面给出

utils.resizeLayer(layerIndex,layerInitWidth,layerInitHeight);

完整的代码见图所示:

3、监听window的resize事件,重新设置大小  监听window变化,调用resizeLayer方法重设置弹出窗口大小

    $(window).resize(function() {

        utils.resizeLayer(layerIndex,layerInitWidth,layerInitHeight);

    });

layui弹出层layer过大被遮挡解决办法

3、重新设置函数  若window比窗口小,取小的值来设置弹出窗口的大小,因为多个页面都要调用,在此封装到utils中作为一个函数来调用,代码见图片所示:

layui弹出层layer过大被遮挡解决办法

4、初始时窗口比window小的情况,自动适应了,如图所示:

layui弹出层layer过大被遮挡解决办法

5、通过鼠标对浏览器窗口进行缩放,调整window大小,可以看到,弹出层也会自动适应:

layui弹出层layer过大被遮挡解决办法

6、如果浏览器窗口正常,window的大小比弹出层大时(即正常情况),窗口使用原始设置的大小,如图所示:

layui弹出层layer过大被遮挡解决办法

  • 用数据库怎么判断用户存在
  • 如何让迅雷(pc版)开启后自动开始下载呢?
  • 百词斩中收藏的单词在哪里可以找到?
  • 怎样激活中国联通帮帮卡?
  • 蜘蛛纸牌怎么发牌?
  • 热门搜索
    长虹空调质量怎么样 梨形身材怎么减肥 减肥早上吃什么早餐好 唐朝皇帝列表及简介 怎样健康减肥 俄罗斯简介 洗头发掉头发怎么办 ipx177怎么被称为神作 代餐减肥 鲁迅的简介