# btn-alert --- 在任何需要点击弹出警告框的按钮(或者任何dom元素)上，只需在class 中加上 `btn-alert`即可。 ```html <a class="btn btn-danger btn-alert" data-msg="我只是试试">Click Me</a> ``` 效果 ![alert1] 支持的属性列表 属性|意义 ---|--- `data-msg` | 提示内容 （必填） `data-title` | "提示" 提示标题 `data-icon` | 默认为3 ，layer数值 `data-btn` | "确定" 按钮文字 `data-on-ok` | `data-on-ok='fun'` 点击按钮函数 特殊情况，`tag.a 为执行作为a标签继续` `data-intop` | 是否在最顶端打开，默认在本窗口打开 其中 `data-on-ok` 为点击确定按钮后执行的事情。 ```html <script> function fun1() { console.log(" data-on-ok fun1"); } </script> <a class="btn btn-danger btn-alert" data-msg="我只是试试" data-title="自定义标题" data-on-ok="fun1">Click Me</a> ``` 效果为 ![alert2] 点击按钮后，控制台输出 ```javascript data-on-ok fun1 ``` 如果（常用） ```html data-on-ok="tag.a" ``` 则点击按钮后将按照A标签来处理，可以跳转到某一个页面，打开dialog，在tab标签中打开，或者用ajax请求数据 1、当点击按钮后，直接访问跳转至某百度 ```html <a class="btn btn-danger btn-alert" 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-alert" 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-alert" data-msg="确定要打开吗？" data-on-ok="tag.a" href="http://www.baidu.com" data-addtab="1">Click Me to tab</a> ``` ![alert4] 4、当点击按钮后，用`ajax`的方式去请求数据(增加`data-addtab="1"`) ```html <a class="btn btn-danger btn-alert" 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-alert` 所在的标签不是A标签，只需把 `href` 改为 `data-url` 即可 ``` <button class="btn btn-danger btn-alert" 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-alert" data-intop="1" data-msg="我只是试试">Click Me to top window</a> ``` 对比如下 在头部弹出的（全屏弹出） ![alert5] 在局部弹出的 ![alert6] [alert1]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/alert1.png [alert2]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/alert2.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 [alert6]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/alert6.png