Infobox Plugin is a jquery highly customizable light weight pop up plugin that allows display Error message
you can use either with “jquery ui” library to get extra aniamtion effect on pop up or else you can also use only with “jquery” library Any one who knows basic javascript or jquery can easily use this plugin
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*/
);
Infobox Error message jquery plugin
build your simple websites by basic html codes
ReplyDeletehtml code Background color transparent