Bootstrap - 警告插件

警告消息主要用于向最终用户显示信息，例如警告或确认消息。使用警告消息插件，您可以为所有警告消息添加关闭功能。

如果您想单独包含此插件功能，则需要 alert.js。否则，如 Bootstrap 插件概述一章所述，您可以包含 bootstrap.js 或压缩后的 bootstrap.min.js。

用法

您可以通过以下两种方式启用警告框的关闭功能：

通过数据属性 - 要通过数据 API 关闭，只需将 data-dismiss = "alert" 添加到您的关闭按钮，即可自动赋予警告框关闭功能。

<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
   &times;
</a>

通过 JavaScript - 要通过 JavaScript 关闭，请使用以下语法：

$(".alert").alert()

示例

以下示例演示了如何通过数据属性使用警告插件。

在线演示

<div class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">
      &times;
   </a>
   
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

选项

这里没有选项。

方法

以下是警告插件的一些有用方法：

方法	描述	示例
.alert()	此方法将所有警告框包装上关闭功能。	$('#identifier').alert();
关闭方法 .alert('close')	要启用所有警告框的关闭功能，请添加此方法。	$('#identifier').alert('close');

要启用警告框在关闭时淡出动画，请确保它们已应用 .fade 和 .in 类。

示例

以下示例演示了如何使用 .alert() 方法：

在线演示

<h3>Alert messages to demonstrate alert() method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){
         $("#myAlert").alert();
      });
   });  
</script>

以下示例演示了如何使用 .alert('close') 方法：

在线演示

<h3>Alert messages to demonstrate alert('close') method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){
         $("#myAlert").alert('close');
      });
   });  
</script>

使用 尝试一下 编辑器尝试此代码。您可以看到关闭功能已应用于所有警告消息，即关闭任何警告消息，其余警告消息也会关闭。

事件

下表列出了与警告插件一起使用的事件。此事件可用于挂接到警告功能。

事件	描述	示例
close.bs.alert	当调用 close 实例方法时，此事件会立即触发。	$('#myalert').bind('close.bs.alert', function () { // do something })
closed.bs.alert	当警告框已关闭时触发此事件（将等待 CSS 过渡完成）。	$('#myalert').bind('closed.bs.alert', function () { // do something })

示例

以下示例演示了警告插件事件：

在线演示

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<script type = "text/javascript">
   $(function(){
      $("#myAlert").bind('closed.bs.alert', function () {
         alert("Alert message box is closed.");
      });
   });
</script>

打印页面