layer.open 笔记

版权声明：本文为博主原创文章，未经博主允许不得转载，转载请附原文链接说明出处。 https://blog.csdn.net/xupeng874395012/article/details/79636509

记录下layer框架的open使用经验
layerAPI
type 用的是1来开启一个页面层
content 掉起了一个div的图层也可以自己拼接字符串

样例代码如下

<div id="nodeInfo" style="display:none;position:relative;z-index:20" class="">
    <form id="nodeForm" name="nodeForm" class="nodeForm">
        <table cellpadding="5">
            <tbody>
            <tr>
                <td>阈值:</td>
                <td id="nodeValueWrap"><input id="nodeValue" name="nodeValue"></input>
                </td>
            </tr>
            <tr>
                <td>呈现文本:</td>
                <td><input id="nodeText" name="nodeText"></input>
                </td>
            </tr>
            <tr>
                <td>状态:</td>
                <td>
                    <select id="nodeType" name="nodeType">
                        <option value="<">小于</option>
                        <option value=">=">大于等于</option>
                        <option value="=">等值</option>
                    </select>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
</div>

   /**
     * 编辑节点信息
     */
    function showEditNode(node) {
        //字符串拼接构造content，或者给定制表单赋值

        layer.open({
            type: 1,
            title:"编辑",
            area: ['250px', '250px'],
            btn: ['确认', '取消'],
            shadeClose: true,
            skin: 'layui-layer-rim',
            content: $('#nodeInfo'),//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响\
            yes: function (index, layero) {
                //doSomething
                layer.close(index); //如果设定了yes回调，需进行手工关闭

            },
            btn2: function (index, node) {
                if (confirm('确定要关闭么')) { //只有当点击confirm框的确定时，该层才会关闭
                    layer.close(index)
                }
                return false;
            },
            cancel: function (index, node) {
                if (confirm('确定要关闭么')) { //只有当点击confirm框的确定时，该层才会关闭
                    layer.close(index)
                }
                return false;
            }
        });
    }