Minimal jQuery Alert Box Plugin with CSS3 Animations - Simple Alert

File Size: 8.39 KB
Views Total: 1640
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal jQuery Alert Box Plugin with CSS3 Animations - Simple Alert

A dead simple jQuery plugin to create alert & notification information boxes with cool CSS3 animations. Fully customizable & stylable via CSS.

How to use it:

1. Include the latest version of jQuery library and the jQuery simple alert plugin at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="simple-alert/simple-alert.min.js"></script>

2. Include the required simple-alert.min.css in the head section of your page.

<link href="simple-alert/simple-alert.min.css" rel="stylesheet">

3. Create an element to open an alert box.

<div id="alert">Click me</div>

4. Set the messages for the alert box and use class option to specify a CSS class that allows you to customize the alert box via CSS.

$("#alert").click(function(){
$.alert("This is a CUSTOM alert.", {
time: 3000, // the time in MS that the alert box will stay
class: "custom" // custom CSS calss
});
});

5. Add your own styles for the alert box in the CSS.

.custom {
  background-color: #27ae60;
  color: #fff;
}

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