第四種捕獲層彈窗 · 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下面，不然樣式會被其他樣式影響。