Layui 弹框的 实现，可以利用弹框的确定取消按钮，来实现对form表单的提交动作！

第一步，先把html考到页面底部，好吧。

[html]  view plain  copy

1. <!-- 编辑的内容 -->  
2. <div id="bjnr" style="display: none;">  
3.     <form class="layui-form" action="" id="saveupdateform">  
4.                     <input id="isNew" name="isNew" type="hidden"/>  
5.                     <table class="layui-table layui-xs" lay-skin="nob">  
6.                           <tbody>  
7.                             <colgroup>  
8.                                 <col width="80">  
9.                                 <col>  
10.                                 <col width="70">  
11.                                 <col>  
12.                             </colgroup>  
13.                             <tr>  
14.                               <td align="right" class="bianjibd"><span class="necessary">*</span>用户帐号</td>  
15.                               <td>  
16.                                     <input type="text" id="yhdh" name="yhdh" lay-verify="required" autocomplete="off" class="layui-input" readonly="true">  
17.                               </td>  
18.                               <td align="right" class="bianjibd"><span class="necessary">*</span>用户姓名</td>  
19.                               <td>  
20.                                     <input type="text" id="xm" name="xm" lay-verify="required" autocomplete="off" class="layui-input">  
21.                             </td>  
22.                             </tr>  
23.                             <tr>  
24.                               <td align="right" class="bianjibd"><span class="necessary">*</span>登录密码</td>  
25.                               <td>  
26.                                     <input type="password" id="mm" name="mm" lay-verify="required"  autocomplete="off" class="layui-input">  
27.                               </td>  
28.                               <td align="right" class="bianjibd"><span class="necessary">*</span>角色类型</td>  
29.                               <td>  
30.                                       <select name="rid" lay-filter="bigarea" id="rid">  
31.                                                 <option value="">请选择</option>  
32.                                      </select>  
33.                             </td>  
34.                             </tr>  
35.                              <tr>  
36.                                   <td align="right" class="bianjibd">身份证号</td>  
37.                                   <td>  
38.                                         <input type="text" id="sfzmhm" lay-verify="identity" name="sfzmhm" autocomplete="off" class="layui-input">  
39.                                   </td>  
40.                                   <td align="right" class="bianjibd">帐号状态</td>  
41.                                   <td>  
42.                                           <select name="zt" lay-filter="zhzhuang" id="zt">  
43.                                                  <option value="">请选择角色状态</option>  
44.                                                       <option value="1">启用</option>  
45.                                                       <option value="2">锁定</option>  
46.                                                       <option value="3">停用</option>  
47.                                          </select>  
48.                                 </td>  
49.                             </tr>  
50.                              <tr>  
51.                                   <td align="right" class="bianjibd">帐号期限</td>  
52.                                   <td>  
53.                                         <input type="text" id="zhyxqStr" name="zhyxqStr" class="layui-input">  
54.                                   </td>  
55.                                   <td align="right" class="bianjibd">密码期限</td>  
56.                                   <td>  
57.                                          <input type="text" id="mmyxqStr" name="mmyxqStr" class="layui-input">  
58.                                 </td>  
59.                             </tr>  
60.                             <tr>  
61.                                   <td align="right" class="bianjibd">所属部门</td>  
62.                                   <td>  
63.                                         <select name="glbm" lay-filter="glbms" id="glbm">  
64.                                             <option value="">请选择</option>  
65.                                          </select>  
66.                                   </td>  
67.                                   <td align="right" class="bianjibd"></td>  
68.                                   <td>  
69.                                 </td>  
70.                             </tr>  
71.                           </tbody>  
72.                         </table>  
73.                         <div class="layui-input-block" style="display:none">  
74.                          <button class="layui-btn tj" lay-submit="" lay-filter="tjbtn">立即提交</button>  
75.                         </div>  
76.     </form>  
77. </div>  

把class="layui-input-block"用display:none隐藏，是为了弹框外的按钮可以实现提交动作。

第二步，js

[javascript]  view plain  copy

1. function addtk(isNew){  
2.      $("#isNew").val(isNew);//这个是为了判断是编辑还是添加，不需要的可以删掉  
3.      debugger;  
4.     //弹出框开始  
5.     var _funbtnxs = {  
6.             yesxs1: function(index,layero){  
7.                 //单击提交的回调  
8.                  var mm = $("#mm").val();  
9.                  $("#mm").val(mm == "" ? undefined : hex_md5(mm));  
10.                 //绑定提交事件到弹出框的提交按钮  
11.                  $('.tj').click();  
12.               }  
13.             ,xs2: function(index,layero){  
14.                 //单击取消的回调  
15.                 layer.close(index);  
16.             },success:function(layero){  
17.                 //弹出前回调  
18.                 layui.use(['form'], function(){  
19.                       var form = layui.form;  
20.                       //各种基于事件的操作，下面会有进一步介绍  
21.                       form.on('submit(tjbtn)', function(data){  
22.                           ajaxSubmitForm('saveupdateform','/save_or_update_user');  
23.                           //return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。  
24.                         });  
25.                     });  
26.                    
27.             }}  
28.     tk("编辑",['600px', '350px'],'userbj',$("#bjnr"),['确定', '取消'],_funbtnxs);  
29.     //弹出框结束  
30. }  

第三步，考入封装的方法，可以放在公共的JS文件中

[javascript]  view plain  copy

1. //弹出框 _title抬头标题,_area_arr弹出框宽高数组,_id唯一性,_content弹出框内容,_btn_arr按钮数组,_funbtnxs点击按钮对象函数  
2. function tk(_title,_area_arr,_id,_content,_btn_arr,_funbtnxs){  
3.       layer.open({  
4.             type: 1  
5.             ,title: _title//标题  
6.             ,area: _area_arr//['600px', '450px']  
7.             ,shade: 0.1  
8.             ,id: _id //设定一个id，防止重复弹出'LAY_layuipro'  
9.             ,btn: _btn_arr//['确定', '取消']  
10.             ,btnAlign: 'r'  
11.             ,moveType: 1 //拖拽模式，0或者1  
12.             ,content:_content //html内容  
13.             ,yes:_funbtnxs.yesxs1  
14.             ,btn2:_funbtnxs.xs2  
15.             ,success:_funbtnxs.success  
16.           });  
17. }