在 Alert 组件里面可以添加一个关闭按钮，用户点击以后可以关闭显示当前这个 alert 组件 .. 可以使用一个 button 标签 .. 上面加上一个 close 这个类 ..

button.close

按钮上面的文字是一个叉号 .. ×

然后在 alert 上面需要再添加一个 alert-dismissible ..

alert 组件上会显示一个关闭按钮 .. 不过现在点一下它没什么反应 ..

让按钮能关闭显示 alert，可以在它上面添加一个 data-dismiss 属性，对应的值设置成 alert ..

再试一下，点一下关闭按钮，可以关掉 Alert 组件的显示 .. 隐藏的时候可以添加一点过渡效果 .. 在 alert 上面添加一个 fade ，再添加一个 show ..

这回 Alert 组件隐藏的时候会有一个过渡效果 ..

方法

我们还可以通过 JavaScript 去关掉 Alert 组件的显示 .. 在 Alert 组件的外面先添加一个按钮 .. 一个 button 元素，上面加上 btn btn-danger .. 按钮上的文字是 Close ..

这个按钮可以再添加一个自定义的 css 类，名字是 close-alert .. 打开自定义的脚本 .. 先用 jQuery 找到页面上的 .close-alert 元素 .. 监听它的点击事件 ..

事件处理里面，找到页面上的带 .alert 这个类的元素 .. 用一下 Bootstrap Alert 组件提供的 alert 这个方法 .. 给它一个参数 .. 一个字符串 .. close ..

按一下页面上这个 Close 按钮 .. 会关掉它上面这个 Alert 组件 ..

事件

Alert 组件在关闭的时候会发生两个事件 .. 如果你想在它们关掉的时候做点事情可以去监听这两个事件 .. 先找到页面上的 Alert 组件元素 .. 用一个 on 方法，先监听一个 close.bs.alert 这个事情 .. 关掉 Alert 组件会立即发生这个事件 .. 可以在控制台上输出一个 close alert...

Alert 组件完全关闭以后，会发生 closed.bs.alert .. 复制一份 .. 再去监听一下这个事件 ..

在控制台上输出一个 closed alert.

再去试一下 ..

打开控制台 .. 然后半掉页面上显示的这个 Alert 组件 .. 控制台上会先输出一个 close alert ，然后等 Alert 组件完全关闭以后，又会输出一个 closed alert.