Create Simple Alert Messages with jQuery and Bootstrap – alert.js

Create Simple Alert Messages with jQuery and Bootstrap – alert.js


alert.js is a jQuery notification plugin which allows you to display one or multiple alert messages via Bootstrap alerts components.


  • Auto close with countdown timers.
  • 4 notification types based on Bootstrap.
  • Can be positioned anywhere on your web page.
  • Without any extra CSS.

Basic Usage:

1. Load Bootstrap’s stylesheet in the head section of the web page.

<link rel="stylesheet" href="//">

2. Load jQuery library and the jQuery alert.js script at the end of the web page.

<script src="//"></script>

<script src="alert.js"></script>
3. Create an alert message box with minimal setup.
$.alert("Message here","Title here");
4. Or bind the plugin to a button so you can trigger the alert message box manually.
$('button').on('click', function () {
     $.alert('Message here', {
        // Options

5. All the options.

// Enable auto close
autoClose: true,

// Auto close delay time in ms (>1000)
closeTime: 5000,

// Display a countdown timer
withTime: false,

// danger, success, warning or info
 type: 'danger',

// position+offeset
// top-left,top-right,bottom-left,bottom-right,center
position: ['center', [-0.42, 0]],

// Message title
title: false,

// For close button
close: '',

// <a href="">Animation</a> speed
speed: 'normal',

// Set to false to display multiple messages at a time
isOnly: true,

// Minimal space in PX from top
minTop: 10,

// onShow callback
onShow: function () {

// onClose callback
onClose: function () {


Jquery Demo Link

Leave a Comment