Hit enter after type your search item

2 Demos of Displaying Bootstrap alert by jQuery events

Display alerts of Bootstrap by jQuery events

In the basic alerts of Bootstrap tutorial, I covered how to use the alerts component of Bootstrap as the web page loads.

The jquery-bs-alerts is a jQuery plug-in for displaying the Bootstrap alerts via jQuery events. For example, displaying a Bootstrap alert as a button is clicked.

Demo1 Demo2
Developer page Download plug-in

How to set up jquery-bs-alerts plug-in on your website?

For setting up the jquery-bs-alerts plug-in, download the plug-in from the above link and include the references of required files in the web page:

  <script src=”js/bsAlerts/jquery.bsAlerts.js”></script>

Refer this after the jQuery library as shown in the demos below.

Add the data attribute data-alerts to the element:

<div data-alerts=”alerts” data-ids=”myid” data-fade=”6000″></div>

Initiate the plug-in via JavaScript:


 

See the demos below with different options and alert types.

A demo of displaying success alert on button click

In this example, the success alert is displayed (green colored) as you click the button. The alert will fade away in three seconds automatically. This is done by using the data attributes:

  • data-alerts=”alerts”
  • data-ids=”myid”
  • data-fade=”3000″

The data-fade is where you may set the duration of fading away the alert after a specified interval. See the demo and code by clicking the link or image below:

jQuery bootstrap alert

See online demo and code

The markup for this demo:


 

The script containing the message and type of alert:


 

A demo of danger alert with title

In this example, a danger alert is created with a title. The title is specified by using the data attribute data-titles while the priority option is used with the danger value. Again, the alert will trigger upon clicking the red button:

bootstrap alert danger

See online demo and code

The markup:


 

The script:


 

There are other options and stuff about that plug-in that you may explore by visiting the developer page.

This div height required for enabling the sticky sidebar