Bootstrap alert box


Bootstrap Alert plug-in

Alert messages are mostly used to display information such as warnings or confirmation messages to end users. Using the Alert plugin, you can add dismissal functionality to all alert messages.

Usage

You can enable the dismissal function of the warning box in the following two ways:

  • Through the data attribute: Add the cancelable function through the Data API. Just add data-dismiss="alert" to the close button, and the close function will be automatically added to the warning box.

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

    : Add cancelable functionality via JavaScript:

$(".alert").alert()
Example

The following example demonstrates the use of the alert box (Alert) plug-in through the data attribute

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 警告框（Alert）插件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="alert alert-warning">
   <a href="#" class="close" data-dismiss="alert">
      ×
   </a>
   <strong>警告！</strong>您的网络连接有问题。
</div>

</body>
</html>

Run Instance»
Click the "Run Instance" button to view the online instance

Option

has no options.

Methods

The following are some useful methods in the Alert plug-in:

Methods.alert()Close Method
To enable animation on close, make sure you add the .fade and .in classes.

Example

The following example demonstrates the usage of the .alert() method:

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 警告框（Alert）插件 alert() 方法</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<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 type="text/javascript">
$(function(){
   $(".close").click(function(){
      $("#myAlert").alert();
   });
});  
</script> 

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

The following example demonstrates.alert('close') Method usage:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 警告框（Alert）插件 alert('close') 方法</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<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 type="text/javascript">
$(function(){
   $(".close").click(function(){
      $("#myAlert").alert('close');
   });
});  

</script>   

</body>
</html>

Run instance»

Click the "Run instance" button to view online Example

You can see that all warning boxes have the close function applied, that is, closing any warning box, other remaining warning boxes will also be closed.

Events

The following table lists the events used in the Alert plug-in. These events can be used as hooks in functions.

DescriptionInstance
This method allows all warning boxes to be closed. 
$('#identifier').alert();
.alert('close')Close all warning boxes. 
$('#identifier').alert('close');
EventDescriptionInstance
close.bs.alert This event is triggered immediately when the close instance method is called. 
$('#myalert').bind('close.bs.alert', function () {
  // 执行一些动作...
})
closed.bs.alertThis event is triggered when the alert box is closed (will wait for the CSS transition effect to complete). 
$('#myalert').bind('closed.bs.alert', function () {
  // 执行一些动作...
})

Example

The following example demonstrates the events of the Alert plug-in:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 警告框（Alert）插件事件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myAlert" class="alert alert-success">
   <a href="#" class="close" data-dismiss="alert">×</a>
   <strong>成功！</strong>结果是成功的。
</div>

<script type="text/javascript">
$(function(){
   $("#myAlert").bind('closed.bs.alert', function () {
      alert("警告消息框被关闭。");
   });
});
</script>  

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance