LayUI实战之layui.layer.open使用
有时候我们有这么一种需求，在开发表单界面的时候，有一行指定用户需求时，需要查询用户，由于用户是独立的表和模块，数据量大的时候，
我们不能一次查找所有数据，放到Select中供用户进行选择，这时候基本上都会需要弹出一个界面，让用户进行查询及选择，选择之后，把选择的数据在传递到上一个打开的界面；
…
没错就是通过layui.layer.open进行实现
layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。
接下来一步一步进行操作
第一步 创建工程
根据自己的爱好，选择顺手的开发工具，进行创建web项目。这里我创建一个空项目
第二步 添加Layui js和css
通过官网 进行下载 https://www.layui.com/
下载之后进行解压 把layui文件夹添加到项目中（参考下图）
第三步 添加2个html文件
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LayUI测试</title> <link href="layui/css/layui.css"/> <script src="layui/layui.all.js"></script> </head> <body> <div class="layui-form-item " > <label class="layui-form-label">选择</label> <div class="layui-input-block" > <button style="width: 15%" class="layui-btn layui-btn-radius layui-btn-warm" type="button" id="sel_good" lay-filter="sel_good">点击选择</button> </div> </div> <div class="layui-form-item selectGood" > <label class="layui-form-label">所选</label> <div class="layui-input-block" id="good" > <input type="text" id="goodName" autocomplete="off" class="layui-input"> <input type="hidden" id="goodId" name="goodId" autocomplete="off" class="layui-input"> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $("#sel_good").on("click", function () { var e = layui.layer.open({ title: "选择", type: 2, move: false, anim: 1, skin: "larry-green", offset: '10px', area: [1024*0.9 + "px", 800*0.9 + "px"], content: "one.html",//后台请求地址 success: function (layero, index) { console.log(layero, index); console.log("=============================================="); var body = layui.layer.getChildFrame('body', index); console.log(body); }, btn: ['按钮一', '按钮二', '按钮三'],//默认 按钮一 执行的yes btn2 是按钮2 btn3是按钮三 yes: function(index, layero){ console.log(layero, index); //do something layer.close(index); //如果设定了yes回调，需进行手工关闭 } }); }); //https://www.layui.com/doc/modules/layer.html#btn </script> </body> </html>one.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="layui/css/layui.css"/> <script src="layui/layui.all.js"></script> </head> <body> <button id="sel_good">这是选择子界面</button> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $("#sel_good").on("click", function () { window.parent.document.getElementById("goodName").value='MacBook pro 笔记本'; window.parent.document.getElementById("goodId").value=1; var index = parent.layer.getFrameIndex(window.name); //当前iframe层的索引 // parent.layer.close(index); //再执行关闭 // layer.close(index); var e = layui.layer.open({ title: "选择", type: 1, move: false, anim: 1, skin: "larry-green", offset: '10px', area: [400 + "px", 300+ "px"], content: "再弹出一个试试！！！",//后台请求地址 btn: ['确定'],//默认 按钮一 执行的yes btn2 是按钮2 btn3是按钮三 yes: function(index, layero){ console.log(layero, index); //do something layer.close(index); //如果设定了yes回调，需进行手工关闭 } }); }); </script> </body> </html>
自己copy文件运行先看看效果是否是这样
第四步 相关说明
$("#sel_good").on("click", function () { var e = layui.layer.open({ title: "选择", type: 2, move: false, anim: 1, skin: "larry-green", offset: '10px', area: [1024*0.9 + "px", 800*0.9 + "px"], content: "one.html",//后台请求地址 success: function (layero, index) { console.log(layero, index); console.log("=============================================="); var body = layui.layer.getChildFrame('body', index); console.log(body); }, btn: ['按钮一', '按钮二', '按钮三'],//默认 按钮一 执行的yes btn2 是按钮2 btn3是按钮三 yes: function(index, layero){ console.log(layero, index); //do something layer.close(index); //如果设定了yes回调，需进行手工关闭 } }); });这里的type=2表示已iframe的方式进行打开文件
content: "one.html", 表示要打开的界面
success表示成功打开界面执行的方法
btn是表示打开界面时下面显示的按钮 //默认 按钮一 执行的yes btn2 是按钮2 btn3是按钮三
yes表是第一个按钮执行的方法
更多说明请参考官网https://www.layui.com/doc/modules/layer.html
$("#sel_good").on("click", function () { window.parent.document.getElementById("goodName").value='MacBook pro 笔记本'; window.parent.document.getElementById("goodId").value=1; var index = parent.layer.getFrameIndex(window.name); //当前iframe层的索引 // parent.layer.close(index); //再执行关闭 // layer.close(index); var e = layui.layer.open({ title: "选择", type: 1, move: false, anim: 1, skin: "larry-green", offset: '10px', area: [400 + "px", 300+ "px"], content: "再弹出一个试试！！！",//后台请求地址 btn: ['确定'],//默认 按钮一 执行的yes btn2 是按钮2 btn3是按钮三 yes: function(index, layero){ console.log(layero, index); //do something layer.close(index); //如果设定了yes回调，需进行手工关闭 } }); });typpe = 1 layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
window.parent.document.getElementById("goodName").value='MacBook pro 笔记本';
window.parent.document.getElementById("goodId").value=1;
这里对上一个界面的数据的回填
var index = parent.layer.getFrameIndex(window.name); //当前iframe层的索引
parent.layer.close(index); 这个表示关闭子界面
layer.close(index);表示关闭当前界面
