## 警告信息 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">×</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">×</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('警告提示已关闭');
})
```
- 第一章 . bootstrap介绍
- 第二章 . 全局CSS样式
- 1、总体注意事项
- 2、栅格系统
- 3、排版
- 4、代码
- 5、表格
- 6、表单
- 7、 按钮
- 8、 图片
- 9、辅助类
- 10、响应式工具
- 第三章 . bootstrap相关CSS应用
- 1、CSS媒体查询 @media
- 2、px,em,rem之间的关系和换算方式
- 第四章 . 组件
- 1、Glyphicons 字体图标
- 2、下拉菜单
- 3、按钮组
- 4、按钮式下拉菜单
- 5、输入框组
- 6、导航
- 7、导航条
- 8、路径导航
- 9、分页
- 10、标签
- 11、徽章
- 12、巨幕
- 13、页头
- 14、缩略图
- 15、警告框
- 16、进度条
- 17、媒体对象
- 18、列表组
- 19、面版
- 20、Well
- 第五章 . JavaScript 插件
- 1、JavaScript 插件引入前提
- 2、过渡效果 (transition.js)
- 3、模态框 (modal.js)
- 4、下拉菜单 (dropdown.js)
- 5、滚动监听 (scrollspy.js)
- 6、可切换标签 (tab.js)
- 7、工具提示 (tooltip.js)
- 8、弹出框 (popover.js)
- 9、警告信息 (alert.js)
- 10、按钮 (button.js)
- 11、折叠插件(collapse.js)
- 12、轮播插件(carousel.js)
- 13、Affix插件(affix.js)