第四种捕获层弹窗 · EasyWeb开发文档3

# 第四种捕获层弹窗 ## 10.4.第四种捕获层弹窗第一种页面层弹窗由于所有关于弹窗内元素的操作都要写在弹窗的success里面，部分人可能不适应这种方式，所以介绍第四种捕获层弹窗： ~~~  <form style="display: none;" id="modelRoleForm" lay-filter="modelRoleForm" class="layui-form model-form"> <input name="roleId" type="hidden"/> <div class="layui-form-item"> <label class="layui-form-label">角色名</label> <div class="layui-input-block"> <input name="roleName" class="layui-input" placeholder="请输入角色名" lay-verType="tips" lay-verify="required" required/> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">备注</label> <div class="layui-input-block"> <textarea name="comments" placeholder="请输入内容" class="layui-textarea"></textarea> </div> </div> <div class="layui-form-item text-right"> <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button> <button class="layui-btn" lay-filter="modelSubmitRole" lay-submit>保存</button> </div> </form>  <script> layui.use(['layer', 'form', 'table', 'admin'], function () { var $ = layui.jquery, layer = layui.layer, form = layui.form, table = layui.table，admin = layui.admin; var formUrl; // 渲染表格 var insTb = table.render({...}); // 添加 $('#btnAddRole').click(function () { showEditModel(); }); // 表格工具条点击事件 table.on('tool(tableRole)', function (obj) { var data = obj.data; var layEvent = obj.event; if (layEvent === 'edit') { // 修改 showEditModel(data); } }); // 显示编辑弹窗 function showEditModel(mRole) { $('#modelRoleForm')[0].reset(); // 重置表单 form.val('modelRoleForm', mRole); // 回显数据 formUrl = mRole ? 'role/update' : 'role/add'; admin.open({ type: 1, fixed: true, // 加这个可解决没有居中的问题 title: (mRole ? '修改' : '添加') + '角色', content: $('#modelRoleForm') // 这里是重点，没有.html() }); } // 表单提交事件 form.on('submit(modelSubmitRole)', function (data) { layer.load(2); $.post(formUrl, data.field, function (res) { layer.closeAll('loading'); if (res.code == 200) { admin.closeDialog('#modelRoleForm'); layer.msg(res.msg, {icon: 1}); insTb.reload(); } else { layer.msg(res.msg, {icon: 2}); } }, 'json'); return false; }); }); </script> ~~~ 与第一种的区别是form不用`<script>`包裹，加`style="display:none"`隐藏， admin.open的content是$('#roleForm')而不是$('#roleForm').html()，表单的提交事件可以直接写在外面，而不用写在弹窗的success里面。 >[danger] 捕获层的弊端就是弹窗的页面代码最好是写在body下面，不然样式会被其他样式影响。