Layui layer open 初始窗口最大化,还原后定位位置不变

layer.open({
                        type: 2,
                        title:"编辑",
                        skin:'layui-layer-lan',
                        offset: 'lt',
                        area: ['100%', '100%'],
                        maxmin: true,
                        content: '{{urlfor "MenuController.ToUpdate"}}?id=' + data.id,
                        restore: function(){ //监听还原窗口restore方法
                            $('.layui-layer').css({
                                'top': '0',
                                'left': '0'
                            })
                        }
                    });

### layer.open 弹出效果的使用方法与配置 `layer.open` 是 Layui 提供的一个用于创建弹出层的功能模块,支持多种类型的弹窗显示方式以及丰富的配置选项。以下是 `layer.open` 的基本使用方法及其常见配置项。 #### 基本语法 `layer.open` 方法通过传入一个对象参数来定义弹窗的行为和样式。其核心结构如下: ```javascript layer.open({ type: 1, // 类型 title: '标题', // 标题 content: '<div>这里是弹窗内容</div>', // 内容 area: ['800px', '600px'], // 宽高 btn: ['确认', '取消'] // 按钮 }); ``` --- #### 配置选项详解 | 参数名 | 描述 | 默认值 | |--------|------|--------| | **type** | 弹窗类型:<br />0(信息框)、<br />1(页面层)、<br />2(iframe 层)、<br />3(加载层)、<br />4(tips 层) | 0 | | **title** | 弹窗标题,可以是一个字符串或者布尔值 `false` 来隐藏标题栏 | '' | | **content** | 弹窗内容。<br />如果是 `type=1` 或者 `type=2`,则可以直接写 HTML 字符串;<br />如果是 `type=2`,也可以指定 URL 地址 | '' | | **area** | 设置宽高,默认单位为像素(px),可以通过数组形式设置宽度和高度,例如:`['500px', '300px']` | 自动调整 | | **offset** | 弹窗偏移位置,可选值有 `'t'`, `'r'`, `'b'`, `'l'` 表示上下左右居中,也可手动输入坐标如 `['100px', '100px']` | 中心居中 | | **shade** | 背景遮罩颜色透明度,范围 `[0, 1]`,设为 `0` 则无背景遮罩 | 0.3 | | **closeBtn** | 是否显示关闭按钮,`true` 显示,`false` 不显示 | true | | **btn** | 底部按钮组,数组中的每一项代表一个按钮的文字描述 | [] | --- #### 动态调整弹窗大小 为了实现动态适配浏览器窗口尺寸的变化,可以在初始化时监听窗口变化事件并重新计算弹窗的高度和宽度[^1]。具体代码如下所示: ```javascript // 初始化弹窗 var index = layer.open({ type: 1, title: '自适应弹窗', content: '<p style="height: 500px;">这是一个测试内容。</p>', area: ['90%', '90%'], maxmin: true, // 启用最大化最小化功能 resize: false // 禁用手动拉伸 }); // 监听窗口大小变化 window.onresize = function() { layer.resize(index); // 更新弹窗大小 }; ``` 上述代码实现了当用户缩放浏览器窗口时自动更新弹窗区域大小的效果[^1]。 --- #### iframe 类型弹窗实例 如果需要在一个独立的子页面中打开链接,则可以选择 `type=2` 并传递目标地址作为 `content` 参数值: ```javascript layer.open({ type: 2, title: 'Iframe 页面', content: '/example.html', // 子页面路径 area: ['800px', '600px'] }); ``` 此模式下会嵌套一个新的网页到父级页面之中,并允许交互操作。 --- #### 加载提示层 (Loading) 对于异步请求场景下的等待反馈,推荐采用 loading 效果: ```javascript var loadIndex = layer.load(1, { shade: [0.1,'#fff'] }); setTimeout(function(){ layer.close(loadIndex); }, 2000); ``` 这里展示了如何启动及停止加载动画过程。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值