点击弹出及保存自动关闭最简实例 · 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'); } ```