# 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