本文介绍如何在Layui中通过点击按钮触发弹出层，并在层内加载表单。核心步骤包括定义按钮并绑定onclick事件，调用layer.open配置参数如type、title和area，通过content属性指定包含表单的DOM元素。示例展示了完整的HTML结构与JavaScript实现，适用于需要动态加载表单的场景。
Layui弹出层加载表单实现步骤
首先，在HTML中定义一个按钮元素。该按钮用于触发后续的操作，通常设置type为button以防止默认提交行为，并添加onclick属性以绑定点击事件处理函数。
<div class="layui-input-inline">
<button type="button" οnclick="selectRole()" class="layui-btn layui-btn-primary layui-btn-radius">选择角色</button>
</div>必须注意，按钮的type属性应明确设置为button。若未正确设置，可能会引发意外的表单提交或其他浏览器默认行为，导致功能异常。
type="button"属性否则将会有问题接下来，编写JavaScript函数以处理按钮点击事件。在该函数中，使用layer.open方法配置弹出层的各项参数，包括类型、标题、尺寸以及内容来源。
//选择角色弹层
function selectRole(){
layer.open({
//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
type:1,
title:"查找用户角色",
area: ['50%','50%'],
content:$("#popSearchRoleTest").html()
});
}弹出层的内容通过指定DOM元素的HTML结构来实现。在HTML中预先定义好包含表单的容器，并将其隐藏。在layer.open配置中，通过content属性引用该容器的HTML内容，从而在弹出层中显示表单。
<!-- 选择角色的按钮 -->
<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 οnclick="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>以上即为Layui中实现点击按钮弹出层并加载表单的完整示例。通过合理配置layer.open参数及DOM引用，可以灵活实现各类动态加载需求。