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

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

<!-- 编辑的内容 -->
<div id="bjnr" style="display: none;">
	<form class="layui-form" action="" id="saveupdateform">
					<input id="isNew" name="isNew" type="hidden"/>
					<table class="layui-table layui-xs" lay-skin="nob">
						  <tbody>
						  	<colgroup>
							    <col width="80">
							    <col>
							    <col width="70">
							    <col>
							</colgroup>
						    <tr>
						      <td align="right" class="bianjibd"><span class="necessary">*</span>用户帐号</td>
						      <td>
						      		<input type="text" id="yhdh" name="yhdh" lay-verify="required" autocomplete="off" class="layui-input" readonly="true">
						      </td>
						      <td align="right" class="bianjibd"><span class="necessary">*</span>用户姓名</td>
						      <td>
									<input type="text" id="xm" name="xm" lay-verify="required" autocomplete="off" class="layui-input">
							</td>
						    </tr>
						    <tr>
						      <td align="right" class="bianjibd"><span class="necessary">*</span>登录密码</td>
						      <td>
						      		<input type="password" id="mm" name="mm" lay-verify="required"  autocomplete="off" class="layui-input">
						      </td>
						      <td align="right" class="bianjibd"><span class="necessary">*</span>角色类型</td>
						      <td>
									  <select name="rid" lay-filter="bigarea" id="rid">
									  			<option value="">请选择</option>
									 </select>
							</td>
							</tr>
							 <tr>
							      <td align="right" class="bianjibd">身份证号</td>
							      <td>
							      		<input type="text" id="sfzmhm" lay-verify="identity" name="sfzmhm" autocomplete="off" class="layui-input">
							      </td>
							      <td align="right" class="bianjibd">帐号状态</td>
							      <td>
										  <select name="zt" lay-filter="zhzhuang" id="zt">
										  		 <option value="">请选择角色状态</option>
											          <option value="1">启用</option>
											          <option value="2">锁定</option>
											          <option value="3">停用</option>
										 </select>
								</td>
							</tr>
							 <tr>
							      <td align="right" class="bianjibd">帐号期限</td>
							      <td>
							      		<input type="text" id="zhyxqStr" name="zhyxqStr" class="layui-input">
							      </td>
							      <td align="right" class="bianjibd">密码期限</td>
							      <td>
										 <input type="text" id="mmyxqStr" name="mmyxqStr" class="layui-input">
								</td>
							</tr>
							<tr>
							      <td align="right" class="bianjibd">所属部门</td>
							      <td>
							      		<select name="glbm" lay-filter="glbms" id="glbm">
							      			<option value="">请选择</option>
										 </select>
							      </td>
							      <td align="right" class="bianjibd"></td>
							      <td>
								</td>
							</tr>
						  </tbody>
						</table>
					    <div class="layui-input-block" style="display:none">
					     <button class="layui-btn tj" lay-submit="" lay-filter="tjbtn">立即提交</button>
					    </div>
	</form>
</div>
把class="layui-input-block"用display:none隐藏,是为了弹框外的按钮可以实现提交动作。



第二步,js

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


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

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



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值