Bootstrap warning box plug-in that you must learn every day_javascript skills

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.

If you want to reference the functionality of this plugin separately, then you need to reference alert.js. Alternatively, as mentioned in the chapter Bootstrap Plugin Overview, you can reference bootstrap.js or a minified version of bootstrap.min.js.

1. Usage
You can enable the dismissal function of the warning box in the following two ways:
1. Through the data attribute: Add the cancelable function through the Data API (Data API). Just add data-dismiss="alert" to the close button, and the closing function will be automatically added to the warning box.

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

2. Through JavaScript: Add cancelable function through JavaScript:
$(".alert").alert()

2. Simple example
The warning box is the information box at the click hour.
1. Basic examples

<div class="alert alert-warning">                   
 <button class="close" type="button" data-dismiss="alert">            
  <span>&times;</span>                     
 </button>                        
 <p>                          
  警告：您的浏览器不支持！                       
 </p>                          
</div>   

2. Add fade in and fade out effects

a35bfa72b5366bdb9bb6febe35707b28
If you use JavaScript, you can replace data-dismiss="alert"

//JavaScript 方法

$('.close').on('click', function() {
 $('#alert').alert('close');
})

There are two types of events in the Alert plug-in:

//事件，其他雷同

$('#alert').on('close.bs.alert', function() {
 alert('当 close 方法被触发时调用！');
}); 

For more information about Bootstrap, please refer to the special topic: Bootstrap learning tutorial

The above is the entire content of this article. I hope it will be helpful for everyone to learn the Bootstrap warning box plug-in.