Sliding Notification Plugin With jQuery And Bootstrap - alarm-box.js

File Size: 5.22 KB
Views Total: 1084
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Sliding Notification Plugin With jQuery And Bootstrap - alarm-box.js

alarm-box.js is a jQuery plugin used to display stacked sliding notification boxes with custom titles,buttons and messages, styled with Twitter Bootstrap.

How to use it:

1. Load Bootstrap's style sheet and the alarm-box.css in the head section of the webpage.

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="alarm-box.css">

2. Load jQuery library and the alarm-box.js at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="alarm-box.js"></script>

3. The fastest way to create a sliding notification box on the webpage.

createPopBox('Notification Message','Notification Title');

4. Customize the notification boxes with the following options.

ModalOptions={

  // height / width of notification box
  modalHeight:140,
  modalWidth:400, 

  // max number of notification boxes
  maxNum:3, 

  // notification title
  modalTitle:'test title',

  // bottom offset
  bottomHeight:0,

  // header title
  modalHeaderHeight:30,

  // margin
  modalMargin:4, 

  // custom button text
  btnInnerFirst:'Cancel', 
  btnInnerSecond:'Okey',
}

initModal(ModalOptions);

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