## 5.3.表單彈窗 類名（class） | 說明 :---|:--- model-form | 調整彈窗內的表單的間距使之更好看 model-form-body | 表單內容部分，高度自適應，超過屏幕高度顯示滾動條 model-form-footer | 表單底部按鈕部分，用于固定底部按鈕 layui-form-required | 表單必填項加紅色星號 表單彈窗示例： ```html <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> ```  固定底部操作按鈕示例： ```html <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 <br/>