要点:
字符串被渲染为弹窗层之后,回自动转换为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>