點擊彈出及保存自動關閉最簡實例 · LayUI的學習

[TOC] 實現的效果如下： ![mark](http://qiniu.newthink.cc/blog/20171017-161236888.gif) # (一)點擊彈出 ## 1、HTML部分 | 參數 | 說明 | | ------------ | ------------ | | type="button" | 必須，否則會提交兩次 | | class="modal-iframe" | 彈出的作用 | | data-params="" | 參數：內容，標題，區域大小 | ``` <include file="public@header"/> </head> <body> <button type="button" class="layui-btn layui-btn-normal modal-iframe" data-params='{"content": "{:url('public/findPassword')}", "title": "添加管理員","area":"300px,300px"}'> 管理員添加 </button> <script src="__STATIC__/larry/js/admin.js"></script> </body> </html> ``` # (二)新頁面AJAX提交 >特別注意：這里的 `lay-submit=""` 和 `lay-filter="submit" `起到了關鍵性的作用！ ## 1、HTML部分 | 參數 | 說明 | | ------------ | ------------ | | type="button" | 必須，否則會提交兩次 | | lay-submit="" lay-filter="submit" | 提交 | ``` <include file="public@header"/> </head> <body> <form class="layui-form" action="{:url('public/passwordReset')}"> <button type="button" class="layui-btn" lay-submit="" lay-filter="submit">重置密碼</button> </form> <script src="__STATIC__/larry/js/admin.js"></script> </body> </html> ``` 如圖紅色的必須 ![mark](http://qiniu.newthink.cc/blog/20171017-163033264.png) ## 2、控制器 ``` public function passwordReset() { $this->success("重置成功！", 'agent/public/login'); } ```