layui的layer.open弹出层高度宽度自适应解决方法

最新推荐文章于 2022-11-01 13:30:34 发布

原创最新推荐文章于 2022-11-01 13:30:34 发布 · 7.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #前端

本文档介绍如何根据当前页面的宽度和高度动态调整layer弹出窗口的大小，确保内容完全可见。当页面尺寸小于弹窗时，通过JavaScript获取页面尺寸，并设置layer的area属性，实现弹窗的自适应，避免了全屏显示的必要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
根据当前页面的宽度高度来改变layer弹窗的大小

前言

layer弹出窗口在弹出时指定了area，弹出后，如果当前页面的大小比弹出的窗口小，那么就会出现无法操作弹出窗口的情况。如图:
在这里插入图片描述
当前页面的大小不足以展示整个弹窗的内容,只能将页面放大全屏才可以看到整个弹窗内容，对其操作。

根据当前页面的宽度高度来改变layer弹窗的大小

代码如下（示例）：

function onclick() {
	//获取当前页面的高度
    var height = $(document.body).height();
    //获取当前页面的宽度
    var width = $(document.body).width();
    layer.open({
        type:1,
        title:"消息提示",
        content:$("#listshow").html(),
        //通过当前页面的高度宽度调节弹窗的大小
        area:[Number(width/2)+"px",Number(height*0.9)+"px"],
        btn:['关闭'],
        skin:'layui-layer-gray',
        yes:function (index,layero) {
            layer.close(index);
        }
    })
}