Bootstrap中的警告信息插件（alert.js）

警告信息 alert.js

实例

通过此插件可以为警告信息添加点击并消失的功能。

当使用 

.close

 按钮时，它必须是  

.alert-dismissible

 的第一个子元素，并且在它之前不能有任何文本内容。

Holy guacamole!  Best check yo self, you're not looking too good.

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

 

用法

为关闭按钮添加 

data-dismiss="alert"

 属性就可以使其自动为警告框赋予关闭功能。关闭警告框也就是将其从 DOM 中删除。

复制

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

为了让警告框在关闭时表现出动画效果，请确保为其添加了 

.fade

 和  

.in

 类。

方法

$().alert()

让警告框监听具有 

data-dismiss="alert"

 属性的后裔元素的点击（click）事件。（如果是通过 data 属性进行的初始化则无需使用）

$().alert('close')

关闭警告框并从 DOM 中将其删除。如果警告框被赋予了 

.fade

 和  

.in

 类，那么，警告框在淡出之后才会被删除。

事件

Bootstrap 的警告框插件对外暴露了一些可以被监听的事件。

事件类型	描述
close.bs.alert	当  close  方法被调用后立即触发此事件。
closed.bs.alert	当警告框被关闭后（也即 CSS 过渡效果完毕之后）立即触发此事件。

复制

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})