# btn-confirm --- 在任何需要点击弹出警告框的按钮(或者任何dom元素)上，只需在class 中加上 `btn-confirm`即可。 ```html <a class="btn btn-danger btn-confirm" data-msg="我只是试试">Click Me</a> ``` ![confirm1] 支持的属性列表 属性 | 意义 ---|--- `data-msg`| 提示内容 必填 `data-title` | 提示标题 `data-icon` | 默认为3 ，layer数值 `data-btn-ok` | `data-btn-ok="确定"` 按钮文字 `data-btn-cancel` | "确定" 按钮文字 `data-on-ok` | 点击取消按钮函数 特殊情况，tag.a 为执行作为a标签继续 `data-on-cancel` | `data-on-cancel="fun"` 点击取消按钮函数 特殊情况，tag.a 为执行作为a标签继续 `data-intop` | 是否在最顶端打开，默认在本窗口打开 - 其中 `data-on-ok` 为点击确定按钮后执行的事情。 - 其中 `data-on-cancel` 为点击取消按钮后执行的事情。 ```html <script> function fun_ok() { console.log(" data-on-ok fun_ok"); } function fun_cancel() { console.log(" data-on-cancel fun_cancel"); } </script> <a class="btn btn-danger btn-confirm" data-msg="我只是试试" data-title="自定义标题" data-on-ok="fun_ok" data-on-cancel="fun_cancel" data-btn-ok="确定吗？" data-btn-cancel="取消吧" >Click Me 1</a> ``` 效果为 ![confirm2] 点击`确认`按钮后，控制台输出 ```javascript data-on-ok fun_ok ``` 点击`取消`按钮后，控制台输出 ```javascript data-on-cancel fun_cancel ``` 如果（常用）`data-on-ok="tag.a"` 或者 `data-on-cancel="tag.a"` 则点击（确定/取消）按钮后将按照A标签来处理，可以跳转到某一个页面，打开dialog，在tab标签中打开，或者用ajax请求数据 > 以下为点击`确定`按钮举例，`取消`按钮方法一样。 1、当点击按钮后，直接访问跳转至某百度 ```html <a class="btn btn-danger btn-confirm" data-msg="确定要打开吗？" data-title="自定义标题" data-on-ok="tag.a" href="http://www.baidu.com">Click Me</a> ``` 2、当点击按钮后，用弹框的方式打开百度(增加`data-dialog="1"`) ```html <a class="btn btn-info btn-confirm" data-msg="确定要打开吗？" data-on-ok="tag.a" href="http://www.baidu.com" data-dialog="1" title="百度" data-area="80%,80%">Click Me to dialog </a> ``` ![alert3] 3、当点击按钮后，在框架头部tab栏中打开百度(增加`data-addtab="1"`) ```html <a class="btn btn-danger btn-confirm" data-msg="确定要打开吗？" data-on-ok="tag.a" href="http://www.baidu.com" data-addtab="1">Click Me to tab</a> ``` ![alert4] 4、当点击按钮后，用`ajax`的方式去请求数据 ```html <a class="btn btn-danger btn-confirm" data-msg="确定要操作吗？" data-on-ok="tag.a" href="http://path/to/api" data-ajax="1">Click Me to tab</a> ``` 5、更多请参考`layer` 或 `tag-a` 相关章节 6、 如果 `btn-confirm` 所在的标签不是A标签，只需把 `href` 改为 `data-url` 即可 ``` <button class="btn btn-danger btn-confirm" data-msg="确定要打开吗？" data-on-ok="tag.a" data-url="http://www.baidu.com" data-addtab="1">Click Me to tab</button> ``` 7、 `data-intop=1` 属性设置后，将会在整个框架页面弹出提示框（全屏弹出），而不是默认的在右侧的页面内弹出。 ```html <a class="btn btn-danger btn-confirm" data-intop="1" data-msg="我只是试试">Click Me to top window</a> ``` 对比如下 在头部弹出的（全屏弹出） ![confirm3] 在局部弹出的 ![confirm1] [confirm1]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/confirm1.png [confirm2]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/confirm2.png [alert3]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/alert3.png [alert4]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/alert4.png [alert5]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/alert5.png [confirm3]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/confirm3.png