1. WIKI教程
2. 学习Bootstrap
3. Bootstrap - 警报插件( Alert Plugin)

Bootstrap - 警报插件( Alert Plugin)

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

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

用法 (Usage)

您可以通过以下两种方式启用解除警报 -

• Via data attributes - 要通过Data API解除，只需将data-dismiss = "alert"到关闭按钮，即可自动发出警报关闭功能。

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

• Via JavaScript - 要通过JavaScript解雇，请使用以下语法 -

$(".alert").alert()

例子 (Example)

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

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

选项 (Options)

There are no options here.

方法 (Methods)

以下是一些有用的警报插件方法 -

$('#identifier').alert();

$('#identifier').alert('close');

要在关闭时启用警报动画，请确保已将.fade和.in类应用于它们。

例子 (Example)

以下示例演示了.alert()方法的用法 -

<h3>Alert messages to demonstrate alert() method </h3>
<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">×</a>
   <strong>Success!</strong> the result is successful.
</div>
<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">×</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">×</a>
   <strong>Success!</strong> the result is successful.
</div>
<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">×</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>   

使用Try it编辑器尝试此代码。 您可以看到关闭功能应用于所有警报消息，即关闭任何警报消息，其余警报消息也将关闭。

事件 (Events)

下表列出了使用警报插件的事件。 此事件可用于挂钩警报功能。

$('#myalert').bind('close.bs.alert', function () {
   // do something
})

$('#myalert').bind('closed.bs.alert', function () {
   // do something
})

例子 (Example)

以下示例演示了警报插件事件 -

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">×</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>