合规国际互联网加速 OSASE为企业客户提供高速稳定SD-WAN国际加速解决方案。 广告
## 警告信息 alert.js 警告框插件(alert.js)为警告框组件一个关闭功能,即点击警告框的关闭按钮,可以让警告框消失,并将它从 DOM 中删除。 **使用方法** **1.** 通过data属性关闭警告框 为警告框添加一个可选的`.alert-dismissible`类和一个关闭按钮,就可以为警告框组件提供关闭功能。关闭按钮可以使用`.close`的任何元素定义,不管什么元素都必须使用`.close`类,并包含`data-dismiss="alert" `属性,`.close`类用于显示 '×' 符号,`data-dismiss`属性用来执行关闭动作。如果希望警告框在关闭时表现出动画效果,还可以为它添加`.fade`和`.in`类。 ```html <div class="alert alert-warning alert-dismissable fade in"> <button type="button" class="close" data-dismiss="alert">&times;</button> <strong>警告</strong>请先进行检查 </div> ``` ![](https://img.kancloud.cn/d2/0b/d20ba3bda8c048d7a2b17c79dec7b6a5_607x88.png) 给关闭按钮添加`data-dismiss="alert"`属性后,无需任何JavaScript代码,就可以自动为警告框赋予关闭功能。点击警告框的 '×' 符号,就可以关闭警告框。 **2.** 可以通过JavaScript关闭警告框 你也可以通过JavaScript为某个警告框添加关闭功能,使用JavaScript方式,就不必为关闭按钮添加`data-dismiss="alert"`属性。 ```html <div class="alert alert-warning alert-dismissable fade in"> <button type="button" class="close">&times;</button> <strong>警告</strong>请先进行检查 </div> ``` ```js $(function() {   $(".close").click(function(){     $(".alert").alert('close');   }); }); ``` 现在点击警告框的 '×' 符号,同样可以将它关闭并从 DOM 中删除。如果警告框被赋予了`.fade`和`.in`类,则在淡出之后才会被删除。 ***** **警告框插件的事件** | 事件 | 含义 | | --- | --- | | close.bs.alert | `close`方法被调用后,立即触发该事件 | | closed.bs.alert | 当警告框已经被关闭(会等待过渡效果执行结束)之后,触发该事件 | ```js $('#box').on('closed.bs.alert',function(){ alert('警告提示已关闭'); }) ```