layui使用button按钮 点击出现弹层 弹层中加载表单

1.html代码片段

<div class="layui-input-inline">
	                	<button type="button" onclick="selectRole()" class="layui-btn layui-btn-primary layui-btn-radius">选择角色</button>
	                </div>
注意:必须添加 
type="button"属性否则将会有问题

2.onclick函数

//选择角色弹层
	function selectRole(){
		layer.open({
        	//layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
            type:1,
            title:"查找用户角色",
            area: ['50%','50%'],
            content:$("#popSearchRoleTest").html()
        });
	}

3.弹出层内容

<!-- 选择角色的按钮 -->
	<div class="layui-row" id="popSearchRoleTest" style="display:none;">
	    <div class="layui-col-md11">
	        <form class="layui-form" lay-filter="formTestFilter2121" >
	            <div class="layui-form-item">
	                <label class="layui-form-label">用户名:</label>
	                <div class="layui-input-inline">
	                    <input type="text" name="userName"  class="layui-input">
	                </div>
	                <label class="layui-form-label">密码:</label>
	                <div class="layui-input-inline">
	                	<input type="text" name="password"  class="layui-input">
	                </div>
	            </div>
	            <div class="layui-form-item">
	                <label class="layui-form-label">角色:</label>
	                <div class="layui-input-inline">
	                    <input type="text" name="roleName" class="layui-input">
	                </div>
	                <div class="layui-input-inline">
	                	<button onclick="selectRole()" class="layui-btn layui-btn-primary layui-btn-radius">选择角色</button>
	                </div>
	            </div>
	            <div class="layui-form-item">
	                <label class="layui-form-label">备注:</label>
	                <div class="layui-input-block">
	                    <textarea placeholder="请输入内容" class="layui-textarea" name="userDescription"></textarea>
	                </div>
	            </div>
	            <div class="layui-form-item">
	                <div class="layui-input-block">
	                    <button type="button" class="layui-btn layui-btn-normal">提交</button>
	                </div>
	            </div>
	        </form>
	    </div>
	</div>

猜你喜欢

转载自blog.csdn.net/qq_37306041/article/details/80411389