1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="css/infobox.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type='text/javascript' src='js/infobox.js'></script>
2. HTML
<div id="error">Error</div>
<div id="sucess">Sucess</div>
<div id="normal">Normal</div>
3. JAVASCRIPT
$( "#error" ).click(function() {
$("body").infobox({
type : 'error',
tittle : 'Fatal Error',
message : 'You got an error',
overlay : 'true',
effect : 'on',
anim : 'bounce', /*slide,fold,bounce,,scale*/
vposition : 'right',
hposition : 'bottom',
timeout : '4000',
speed : '1000',
animatefrom :'left'
});
});
$( "#sucess" ).click(function() {
$("body").infobox({
type : 'sucess',
tittle : 'succes You made it',
message : 'You passed success fully',
overlay : 'true',
effect : 'on',
anim : 'slide', /*slide,fold,bounce,scale*/
vposition : 'right',
hposition : 'bottom',
timeout : '4000',
speed : '1000',
animatefrom :'down'
});
});
$( "#normal" ).click(function() {
$("body").infobox({
type : 'normal',
tittle : 'Please continue',
message : 'Continue your task and update ',
overlay : 'true',
effect : 'on',
anim : 'scale', /*slide,fold,bounce,scale*/
vposition : 'right',
hposition : 'bottom',
timeout : '4000',
speed : '1000',
animatefrom :'up'
});
});
4. OPTIONS
$("body").infobox({
type : 'sucess', /*here you can define sucess, error ,normal*/
tittle : 'succes You made it', /*here you can define error message tittle*/
message : 'You passed success fully', /*here you can define error 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*/
});
JS Tutorial
