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

最新推荐文章于 2025-06-14 10:00:00 发布

铁汉柔情li

最新推荐文章于 2025-06-14 10:00:00 发布

阅读量2.5w

点赞数 7

CC 4.0 BY-SA版权

分类专栏： layui 前端文章标签： layui button 前端

本文链接：https://blog.youkuaiyun.com/qq_37306041/article/details/80411389

前端同时被 2 个专栏收录

10 篇文章

订阅专栏

layui

4 篇文章

订阅专栏

本文介绍了一个使用layui框架实现的弹出层案例，包括弹窗按钮的设置及弹出层内的表单元素配置。该案例展示了如何定义弹窗按钮、设置弹窗样式、配置表单输入项及按钮等细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>