## 10.1.第一種 頁面層彈窗 頁面層彈窗就是彈窗頁面和列表頁面在一個html中，彈窗類型type=1： ```html <button id="btnAddUser" class="layui-btn">添加</button> <table id="tableUser" lay-filter="tableUser"></table> <!-- 表單彈窗，注意這里要用script包起來 --> <script type="text/html" id="modelUser"> <form id="modelUserForm" lay-filter="modelUserForm" class="layui-form model-form"> <input name="userId" type="hidden"/> <div class="layui-form-item"> <label class="layui-form-label">用戶名</label> <div class="layui-input-block"> <input name="nickName" 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"> <input type="radio" name="sex" value="男" title="男" checked/> <input type="radio" name="sex" value="女" title="女"/> </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="modelSubmitUser" lay-submit>保存</button> </div> </form> </script> <!-- 表格操作列 --> <script type="text/html" id="tableBarUser"> <a class="layui-btn" lay-event="edit">修改</a> <a class="layui-btn" lay-event="del">刪除</a> </script> <!-- 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 insTb = table.render({ elem: '#tableUser', url: '../../json/user.json', cols: [[ {field: 'nickName', title: '用戶名'}, {field: 'sex', title: '性別'}, {toolbar: '#tableBarUser', title: '操作'} ]] }); // 添加 $('#btnAddUser').click(function () { showEditModel(); }); // 工具條點擊事件 table.on('tool(tableUser)', function (obj) { var data = obj.data; var layEvent = obj.event; if (layEvent === 'edit') { // 修改 showEditModel(data); } else if (layEvent === 'del') { // 刪除 layer.msg('點擊了刪除', {icon: 2}); } }); // 顯示表單彈窗 function showEditModel(mUser) { admin.open({ type: 1, title: (mUser ? '修改' : '添加') + '用戶', content: $('#modelUser').html(), // 注意這里有.html() success: function (layero, dIndex) { var url = mUser ? '/updateUser' : '/addUser'; form.val('modelUserForm', mUser); // 回顯數據 // 表單提交事件 form.on('submit(modelSubmitUser)', function (data) { layer.load(2); $.post(url, data.field, function (res) { layer.closeAll('loading'); if (res.code == 200) { layer.close(dIndex); layer.msg(res.msg, {icon: 1}); insTb.reload(); // 保存成功刷新表格 } else { layer.msg(res.msg, {icon: 2}); } }, 'json'); return false; }); } }); } }); </script> ``` 通過`content: $("#modelUser").html()`是指定彈窗內容，表單使用`<script type="text/html">`而不是使用div， 這樣表單就不會默認顯示出來，操作表單的代碼都要寫在`success`里面，因為彈窗是把表單的html復制一份動態插入到頁面上， 這種方式修改回顯數據、修改完刷新表格都比較方便。 >[danger] **切記：** 這種寫法的彈窗所有操作彈窗內元素的代碼都要放在彈窗的success里面。 <br/>