Layer与select连用，组件会失效

今天需要在一个弹窗里面新添加一个编辑按钮，点击按钮，在另外一个单床里面出现一个页面，中间需要一个selext下拉框。

由于之前的弹窗在Layer组件里面，所以我就跟着添加一个按钮，如下：

  function onlySelect() {
        layer.open({
            type: 2,
            area: ['500px', '400px'],
            title: ['功能列表', 'color:#fff;background-color:#2E88D6;'],
            offset: "auto",
            id: "updateContent",
            closeBtn: 1,
            content: "/api/****?globalId=" + $("#userId").val(),
            success: function (layero, index) {
            alert("权限认证通过");
            },
            btn: ['编辑', '确定', '取消'],
            yes: function (index, layero) {
                document.getElementById("layerForm").style.display = "";
                layer.open({
                    title: ['开始编辑', 'color:#fff;background-color:#2E88D6;'],
                    type: 1,
                    zIndex: '99',
                    area: ['800px', '500px'],
                    content: $('#layerForm')
                });
            },
            btn2: function (index, layero) {
                console.log(checkedProjectId)
                if (checkedProjectId == -1) {
                    layer.alert("请选择目标项目", {icon: 0, offset: '200px'});
                }
            },
            btn3: function (index, layero) {
                //按钮【按钮二】的回调
                //return false 开启该代码可禁止点击该按钮关闭
            },
            cancel: function () {
                //右上角关闭回调
                return false ;
            }
        })
    }

大致这样子的代码，这点没有问题，点击编辑按钮，页面可以出现，但是select组件却没办法实现。

寻找办法：
1、写上静态的值传递，进行测试，NO
2、将页面单独写在html页面，点击按钮进行访问 NO
3、option直接确定好，写死代码放入html，由弹框控制 NO

之后进行百度，查看Layer官网，最后发现：

原因：

由于使用Layer进行弹框处理，所以中间所有的组件都会受中间的样式影响，select 、input等等动态组件会被隐藏。

解决方式：

给弹出框的方法进行修饰：

将方法替代上面的functio()

layui.use(['element', 'layer', 'form'], function (){})

之后再进行添加，就可以自定义样式和展示形式咯。

怕出错的话，看最终样式：

layui.use(['element', 'layer', 'form'],function onlySelect() {
        layer.open({
            type: 2,
            area: ['500px', '400px'],
            title: ['功能列表', 'color:#fff;background-color:#2E88D6;'],
            offset: "auto",
            id: "updateContent",
            closeBtn: 1,
            content: "/api/****?globalId=" + $("#userId").val(),
            success: function (layero, index) {
            alert("权限认证通过");
            },
            btn: ['编辑', '确定', '取消'],
            yes: function (index, layero) {
                document.getElementById("layerForm").style.display = "";
                layer.open({
                    title: ['开始编辑', 'color:#fff;background-color:#2E88D6;'],
                    type: 1,
                    zIndex: '99',
                    area: ['800px', '500px'],
                    content: $('#layerForm')
                });
            },
            btn2: function (index, layero) {
                console.log(checkedProjectId)
                if (checkedProjectId == -1) {
                    layer.alert("请选择目标项目", {icon: 0, offset: '200px'});
                }
            },
            btn3: function (index, layero) {
                //按钮【按钮二】的回调
                //return false 开启该代码可禁止点击该按钮关闭
            },
            cancel: function () {
                //右上角关闭回调
                return false ;
            }
        })
    })

这下没问题了吧

如果想看select动态添加，可以参考：

JS中的json对象循环，以动态select为例

---

THE END
GOOD LUCK