Bootstrap 3 警告框插件 ( Alert )
Bootstrap 3 警告框插件 ( Alert ) 可以向所有的警告框消息添加可取消( dismiss ) 功能
警告框 ( alert ) 消息大多是用来向终端用户显示诸如警告或确认消息的信息
警告框插件 ( Alert )
我们可以通过以下两种方式启用警告框的可取消( dismissal ) 功能
-
通过 data 属性
通过数据 API( Data API ) 添加可取消功能
只需要向关闭按钮添加 data-dismiss="alert" ，就会自动为警告框添加关闭功能
<a class="close" data-dismiss="alert" href="#" aria-hidden="true"> × </a>
-
通过 JavaScript**
通过 JavaScript 添加可取消功能
$(".alert").alert()
下面的范例演示了通过 data 属性使用警告框( Alert ) 插件
<div class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert"> × </a> <strong>警告！</strong>您的网络连接有问题 </div>
运行以上范例，输出结果如下
方法
下表列出了警告框插件 ( alert) 可用的方法
| 方法 | 描述 |
|---|---|
| .alert() | 该方法让所有的警告框都带有关闭功能 $('#identifier').alert(); |
| .alert('close') | 关闭所有的警告框 $('#identifier').alert('close'); |
如需在关闭时启用动画效果，可以添加 .fade 和 .in CSS 类
下面的范例演示了 .alert() 方法的使用
<h3>警告框( Alert ) 插件 alert() 方法</h3> <div id="myAlert" class="alert alert-success"> <a href="#" class="close" data-dismiss="alert">×</a> <strong>成功！</strong>结果是成功的。 </div> <div id="myAlert" class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert">×</a> <strong>警告！</strong>您的网络连接有问题。 </div> <script> $(function(){ $(".close").click(function(){ $("#myAlert").alert(); }); }); </script>
运行以上范例，输出结果如下
范例 3
下面的范例演示了 .alert('close') 方法的使用
<h3>警告框( Alert ) 插件 alert('close') 方法</h3> <div id="myAlert" class="alert alert-success"> <a href="#" class="close" data-dismiss="alert">×</a> <strong>成功！</strong>结果是成功的。 </div> <div id="myAlert" class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert">×</a> <strong>警告！</strong>您的网络连接有问题。 </div> <script> $(function(){ $(".close").click(function(){ $("#myAlert").alert('close'); }); }); </script>
我们可以看到所有的警告框都应用了关闭功能，即关闭任意的警告框，其它剩余的警告框也会被关闭
运行以上范例，输出结果如下
事件
下表列出了警告框插件 ( alert ) 可以使用的事件
| 事件 | 描述 |
|---|---|
| close.bs.alert | 当调用close实例方法时立即触发该事件 $('#myalert').bind('close.bs.alert', function () { // 执行一些动作... }) |
| closed.bs.alert | 当警告框被关闭时触发该事件( 会等待 CSS 过渡效果完成 ) $('#myalert').bind('closed.bs.alert', function () { // 执行一些动作... }) |
下面的范例演示了警告框插件 ( Alert) 事件的使用
<div id="myAlert" class="alert alert-success"> <a href="#" class="close" data-dismiss="alert">×</a> <strong>成功！</strong>结果是成功的 </div> <script> $(function(){ $("#myAlert").bind('closed.bs.alert',function(){ alert("警告消息框被关闭"); }); }); </script>
运行以上范例，输出结果如下
