Simple jQuery Popup Plugin with Easing Effects - Infobox

Infobox is a really simple JQuery plugin that enables you to create modal-style popups with fullscreen overlay and easing effects (jQuery UI is required).

How to use it:

1. Include the jQuery infobox plugin's CSS in the header of your web page.

<link rel="stylesheet" href="css/infobox.css">

2. Include the jQuery library and jQuery infobox plugin's Javascript in the footer of the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/infobox.js"></script>

3. Include the jQuery UI for the easing options (Optional).

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

4. Create an element to toggle a popup info box.

<div id="demo">Popup</div>

5. Initialize the plugin and create the content for the popup.

$( "#demo" ).click(function() {
$("body").infobox({
type        : 'sucess',    // here you can define sucess, error ,normal
tittle      : 'Title',  // here you can define message tittle
message     : 'Message',  // here you can define message
overlay     : 'true',   // here you can define "true' or "false" to hide overlay while pop up
effect      : 'on',     // this is the one of the main part ,define "off" if u are not using jquery ui library
anim        : 'slide',  // here you can define diffrent animation like slide,fold,bounce,scale  if you are uisng "jquery ui"
vposition   : 'right',  // here you can define vertcal postion of pop up
hposition   : 'bottom', // here you can define horizontal postion of pop up
timeout     : '4000',   // here you can define timeout to hide the pop up	
});
});

Change log:

2014-08-23

• Update infobox.js

---

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