## 10.4.第四种 捕获层弹窗 第一种页面层弹窗由于所有关于弹窗内元素的操作都要写在弹窗的success里面， 部分人可能不适应这种方式，所以介绍第四种捕获层弹窗： ```html <!-- 表单弹窗，加display: none默认隐藏 --> <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> <!-- js部分 --> <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下面，不然样式会被其他样式影响。 <br/>