layui弹出层处理（获取、操作弹出层数据等）

要点：
字符串被渲染为弹窗层之后，回自动转换为DOM，可以使用jq进行各种操作
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>开始使用layui</title>
        <link rel="stylesheet" href="/css/layui.css">
    </head>
    <script type="text/javascript" src="layui/layui.all.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

    
<!--     * 从官网下载的layui包中解压后内容如下
     * ├─css //css目录
      │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
      │  │  ├─laydate
      │  │  ├─layer
      │  │  └─layim
      │  └─layui.css //核心样式文件
      ├─font  //字体图标目录
      ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
      │─lay //模块核心目录
      │  └─modules //各模块组件
      │─layui.js //基础核心库
      └─layui.all.js //包含layui.js和所有模块的合并文件
      
      * 这里要十分注意的是，我们测试的代码中引入layui的js要引入 layui.all.js，否则某些功能会无效-->
      


    <body>
        <!-- 你的HTML代码 -->
        <div>
            aa
        </div>
        <button id="start" data-method="setTop" class="layui-btn">显示弹出层</button>

    <script>
    

         $(function(){
             
             //打开弹窗
             $("#start").on("click",function(){
                f1();
            });
             
             //添加文件名称按钮
             $(document).on("click", "#add", function () {
                 var name = $("#doc_name").val();
                 if(!name){
                     alert("请输入正确文件名称！");
                     return;
                 }
                 
                 var s = `
                     <div class="remove">
                        <span class="names">${name}</span>
                        <button class="layui-btn">移除</button>
                    </div>
                `;
                $("#name_list").append(s);
                $("#doc_name").val("");
            
            });
             
             //移除当前文件名
             $(document).on("click", ".remove", function () {
                $(this).remove();
            });
             
             
        });
             
    
        function f1(){
            
            //弹出层内容
            var s = `
                <div id="layer1" >
                        <div class="layui-input-inline">
                            <label class="layui-form-label">文件名：</label>
                              <input id="doc_name" type="text" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                              <button class="layui-btn" id="add">添加</button>
                        </div>
                    <label class="layui-form-label">待入库文件：</label>
                    <div id="name_list" class="layui-inline">
                        
                    </div>
                </div>
            `;
            
            //打开弹出层
            layer.open({
              type: 1,
              skin: 'layer-cover', 
              area: ['900px', '470px'],
              anim: 5,
              title: "xx文件入库",
              content: s,
              btn: ['入库'],
              yes: function(){
                //执行入库方法
                var arr = [];
                $(".names").each(function(i){
                   var name = $(this).text();
                   arr.push(name);
                })
                alert(arr);
             },
              btnAlign: 'c',
              shadeClose:'true',
              end: function(index, layero){
                  
              }
            });
            
        }
    
    
    
    </script>

</html>
layui弹出层处理（获取、操作弹出层数据等）

相关推荐
