LayUI实战之layui-layer.open使用
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: [10240.9 + “px”, 8000.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> ` ...