Layui弹窗open使用说明

Layui 弹窗open使用说明

[TOC]

## 1. layer.open参数说明

|参数|说明|
|--|--|
|type|基本层类型：0（信息框，默认）1（页面层）2（iframe层，也就是解析content）3（加载层）4（tips层）|
|id|设置id可以防止重复弹窗和唯一标识open|
|moveType|拖拽模式：0或者1|
|title|标题|
|content|HTML内容或者页面地址（当type: 2时就是url）|
|area|宽高：如果是100%就是满屏；示例： ['1024px', '768px']|
|offset|坐标：默认值为auto（垂直水平居中）|
|btnAlign|按钮显示的位置，默认在右下脚，可设置't','c'等|
|btn|按钮：按钮1的回调是yes（也可以是btn1），而从按钮2开始，则回调为btn2: function(){}，以此类推；示例['按钮1', '按钮2']|
|closeBtn|关闭按钮：layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则0|
|shade|遮罩：默认：0.3透明度的黑色背景（'#000'）|
|shadeClose|是否点击遮罩关闭：默认：false|
|time|自动关闭所需毫秒：默认：0不会自动关闭|
|maxmin|最大最小化：默认：false|
|fixed|固定：默认：true|
|resize|是否允许拉伸：默认：true|
|zIndex|层叠顺序：默认：19891014，一般用于解决和其它组件的层叠冲突|
|success|function(layero, index){},层弹出后的成功回调方法：layero前层DOM，index当前层索引|
|yes|function (index, layero) {},第一个按钮事件，也可以叫btn1|
|btn2|function (index, layero) {layer.close(index);}<br/>这里第二按钮是关闭open弹出的操作，这里可以在方法体中随意执行任何代码，不一定就是关闭按钮|
|cancel|function(index, layero){if(layer.confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭<br>layer.close(index);}return false;}<br/>弹窗右上脚的×按钮|
|end|function(){}<br/>层销毁后触发的回调：无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数|
|full|function(){}<br/>最大化后触发的回调：携带一个参数，即当前层DOM|
|min|function(){}<br/>最小化后触发的回调：携带一个参数，即当前层DOM|
|restore|function(){}<br/>还原后触发的回调：携带一个参数，即当前层DOM|

## 2. open打开一段html代码

```HTML
var tmpHtml = '<table style="margin:8px;"><tr><td>是否统计：<input name="isok" value="1" type="radio" >统计 ' +
                ' <input name="isno" value="0" type="radio" >不统计 ' + '</td></tr>' +
                '   <tr>' +
                '       <td>说明：<br/>' +
                                '              <textarea name="" id="remark" cols="" rows="6" maxlength="200"></textarea> ' +
                '       </td>' +
                '   </tr>' +
                '</table>';
var layuiOpen = layer.open({
                type: 1,  //可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                title: ['修改否统计'],//数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
                content: tmpHtml,
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                },
                btn2: function (index, layero) {
                    layer.close(index)
                }
            });
```

## 3. layui关闭指定的open窗体

layer.close(layuiOpen)

在第2点的演示代码中我们将open赋值给了layuiOpen变量，这样我们就可以在其它的地方来操作这个窗体了，例如关闭窗体，我们只需要执行上面这句代码就行了

## 4. 获取layui弹窗中的DOM内容

**获取 DOM 内容：**

+ 在按钮回调函数中，通过layero.find('iframe')[0].contentWindow获取 iframe 的窗口对象
+ 使用iframeWindow.document访问 iframe 中的文档对象
+ 可以像操作普通 DOM 一样获取特定元素，如getElementById、querySelector等

```javascript
// 打开iframe弹出窗口
$('#openIframeBtn').on('click', function() {
    popupIndex = layer.open({
    type: 2,
    title: '示例页面',
    area: ['800px', '500px'],
    content: 'https://picsum.photos/800/500', // 使用示例URL，实际项目中替换为你的URL
    btn: ['获取窗口DOM内容', '关闭'],
    yes: function(index, layero) {
        // 获取iframe元素
        var iframeWindow = layero.find('iframe')[0].contentWindow;
        try {
            // 获取iframe中的DOM内容
            var title = iframeWindow.document.title;
            var bodyContent = iframeWindow.document.body.innerHTML;
            // 这里简单获取页面标题和body内容作为示例
            // 实际项目中可以根据需求获取特定的DOM元素
            // 显示获取结果
            $('#resultArea').html(`
                <p><strong>页面标题:</strong> ${title}</p>
                <p><strong>页面内容预览:</strong></p>
                <div class="mt-2 p-2 bg-white rounded border border-gray-200 text-xs">
                                ${bodyContent.substring(0, 300)}...
                            </div>
                        `);
          } catch (e) {
              // 跨域访问会导致安全错误，这里进行错误处理
              $('#resultArea').html(`
                  <div class="text-red-500">
                      <i class="fa fa-exclamation-circle mr-1"></i>无法获取窗口DOM内容，可能存在跨域限制
                                    <p class="mt-1 text-xs">错误信息: ${e.message}</p>
                            </div>
                        `);
                    }
                },
            btn2: function(index) {
                layer.close(index);
            }
        });
    });
```