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.

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: '',

// <a href="https://www.jqueryscript.net/animation/">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 () {
}

source:

Jquery Demo Link

https://www.jqueryscript.net/other/Create-Simple-Alert-Messages-with-jQuery-Bootstrap-alert-js.html