# 表单弹窗 ## 5.3.表单弹窗 | 类名（class） | 说明 | | --- | --- | | model-form | 调整弹窗内的表单的间距使之更好看 | | model-form-body | 表单内容部分，高度自适应，超过屏幕高度显示滚动条 | | model-form-footer | 表单底部按钮部分，用于固定底部按钮 | | layui-form-required | 表单必填项加红色星号 | 表单弹窗示例： ~~~ <script type="text/html" id="modelUser"> <form id="modelUserForm" lay-filter="modelUserForm" class="layui-form model-form"> <input name="userId" type="hidden"/> <div class="layui-form-item"> <label class="layui-form-label layui-form-required">账号</label> <div class="layui-input-block"> <input name="username" placeholder="请输入账号" class="layui-input"/> </div> </div> <div class="layui-form-item text-right"> <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button> <button class="layui-btn" lay-filter="modelSubmitUser" lay-submit>保存</button> </div> </form> </script> <script> layui.use(['admin'],function(){ var admin = layui.admin; admin.open({ type: 1, title: '添加用户', content: $('#modelUser').html(), success: function (layero, dIndex) { // 表单的操作，事件绑定等都写在success回调里面 } }); }); </script> ~~~  固定底部操作按钮示例： ~~~ <script type="text/html" id="modelUser"> <form class="layui-form model-form no-padding" id="modelUserForm" lay-filter="modelUserForm"> <div class="model-form-body" style="max-height: 320px;"> <!-- 如果要超出屏幕才固定底部，不要写max-height --> <div class="layui-form-item"> <label class="layui-form-label">实习公司</label> <div class="layui-input-block"> <input name="companyName" class="layui-input"/> </div> </div> <!-- ......省略 --> </div> <div class="layui-form-item text-right model-form-footer"> <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button> <button class="layui-btn" lay-filter="modelSubmitUser" lay-submit>保存</button> </div> </form> </script> ~~~  > 固定底部按钮需要model-form-body和model-form-footer,普通表单弹窗只需要model-form