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.

Features:

• 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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

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

<script src="//code.jquery.com/jquery-1.11.1.min.js"></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: '', 

// Animation 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 () {
}  

---

This awesome jQuery plugin is developed by gkShine. For more Advanced Usages, please check the demo page or visit the official website.