Bootstrap warning box


May 04, 2021 09:00 Bootstrap


Table of contents


Bootstrap Warning Box (Alert) plug-in

Bootstrap warning boxes are separate components that provide users with some valid informational alert boxes when they manipulate the context.

Warning box messages are mostly used to display information such as warnings or confirmation messages to end users. With the Alert plug-in, you can add a cancelable feature to all warning box messages.

Usage

There are two ways you can enable the cancelable feature of the warning box:

  • With the data property: Add cancelable functionality through the Data API, which automatically adds a turn-off feature to the warning box simply by adding data-dismiss"alert" to the close button.

    <a class="close" data-dismiss="alert" href="#" aria-hidden="true">
       &times;</a>
  • Add cancelable features with JavaScript:

    $(".alert").alert()

Instance

The following example demonstrates the use of the Alert plug-in through the data property.

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 警告框(Alert)插件</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><div class="alert alert-warning">
   <a href="#" class="close" data-dismiss="alert">
      &times;   </a>
   <strong>警告!</strong>您的网络连接有问题。</div></body></html>

The result is as follows:

Bootstrap warning box

Options

There are no options.

Method

Here are some useful ways to do this in the Alert plug-in:

方法 描述 实例
.alert() 该方法让所有的警告框都带有关闭功能。
$('#identifier').alert();
Close Method .alert('close') 关闭所有的警告框。
$('#identifier').alert('close');
To enable animation when turned off, make sure you add .fade and .in class.

Instance

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

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 警告框(Alert)插件 alert() 方法</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><h3>警告框(Alert)插件 alert() 方法</h3><div id="myAlert" class="alert alert-success">
   <a href="#" class="close" data-dismiss="alert">&times;</a>
   <strong>成功!</strong>结果是成功的。</div><div id="myAlert" class="alert alert-warning">
   <a href="#" class="close" data-dismiss="alert">&times;</a>
   <strong>警告!</strong>您的网络连接有问题。</div><script type="text/javascript">$(function(){
   $(".close").click(function(){
      $("#myAlert").alert();
   });});  </script> </body></html>

The following example demonstrates the use of the .alert ('close') method:

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 警告框(Alert)插件 alert('close') 方法</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><h3>警告框(Alert)插件 alert('close') 方法</h3><div id="myAlert" class="alert alert-success">
   <a href="#" class="close" data-dismiss="alert">&times;</a>
   <strong>成功!</strong>结果是成功的。</div><div id="myAlert" class="alert alert-warning">
   <a href="#" class="close" data-dismiss="alert">&times;</a>
   <strong>警告!</strong>您的网络连接有问题。</div><script type="text/javascript">$(function(){
   $(".close").click(function(){
      $("#myAlert").alert('close');
   });});  </script>   </body></html>

You can see that all the warning boxes have a turn-off feature applied, i.e. any other warning box is turned off, and the rest of the warning boxes are turned off.

Event

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

事件 描述 实例
close.bs.alert 当调用 close 实例方法时立即触发该事件。
$('#myalert').bind('close.bs.alert', function () {
  // 执行一些动作...})
closed.bs.alert 当警告框被关闭时触发该事件(将等待 CSS 过渡效果完成)。
$('#myalert').bind('closed.bs.alert', function () {
  // 执行一些动作...})

Instance

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

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 警告框(Alert)插件事件</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><div id="myAlert" class="alert alert-success">
   <a href="#" class="close" data-dismiss="alert">&times;</a>
   <strong>成功!</strong>结果是成功的。</div><script type="text/javascript">$(function(){
   $("#myAlert").bind('closed.bs.alert'function ({
      alert("警告消息框被关闭。");
   });});</script>  </body></html>

The result is as follows:

Bootstrap warning box

Read about it

JavaScript bounce window