I received a request from my reader that asked to me how to implement facebook style alert box. so I had designed Facebook Style Alert Confirm Box with jquery plug-in jquery.alert.js. It's simple just changing some line of CSS code. Take a look at live demo
Original jquery.alert.js Demo click here
Download Script 
Live DemoFacebook API Developers Guide (Firstpress)
HTML / Javascript Code
Contains javascript and HTML Code.
<link href="facebook.alert.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.alert.js"></script>
<script type="text/javascript">
$(document).ready( function()
{
$("#delete_confirm").click( function()
{
jConfirm('Are you sure you want ot delete this thread?', '',
function(r)
{
if(r==true)
{
//You havt to include Ajax funtion for deleting records tutorial link
$("#box").fadeOut(300);
}
});
});
});
</script>
<div id="box" style=" background-color:#ffffcc;">
<a href="#" id="delete_confirm">Delete</a>
</div>
facebook.alert.css
Contains CSS code.
#popup_container
{font-family:'Lucida Grande',arial;
font-weight:bold;
text-align:left;
font-size: 12px;
width: 364px;
height: 86px;
background: #F3F3F3;
border:solid 1px #dedede;
border-bottom: solid 2px #456FA5;
color: #000000;
}
#popup_title
{display:none;
}
#popup_message
{padding-top: 15px;
padding-left: 15px;
}
#popup_panel
{text-align: left;
padding-left:15px;
}
input
{background-color:#476EA7;
padding:3px;
color:#FFFFFF;
margin-top:20px;
margin-right:10px;
}
Recent 20 Articles
Latest 20 Articles on 9lessons
Feel free post a commet.
Great post!
Thanks
Great, thanks alot :)
Awlad
Great article! Thanks for taking the time to explain Facebook Style Alert Confirm Box with jQuery and CSS. I've been thinking about similar topics lately, and it's good to see that I'm not alone. What do you think about JavaScriptMVC – Include?
great post...
u're the best..
@ Syafrizal
Thank you
Very nice, thanks for the share.
very useful
Thanks for the idea. really creative :)
Very good. Thanks for share.
Very cool and useful.
Thank you.
how can i change style of comment box for web sites which made facebook... CAn you help
Thanks for this useful article. Best regards.
This code is not synchronous that means whatever you will write after alert call, will be executed before you press delete or cancel button. Can u make it synchronous? That means the things after alert call should execute only after i press delete or execute button. The same problem is with jAlert() function. Solve this one also.!!
wow great... this code is what i've been looking for! : ]
great job
Firstly, thanks for this great script.
But I have a question. You said that
"You havt to include Ajax funtion for deleting records" in the script and gave a tutorial link. The deleting function works perfectly without alert confirm but I can not combine with this alert confirm script. They did not work together.How can we combine this two scripts? Can you write an example?
Awesome dude.............!
Nice work.
Nice!
You need to handle keystrokes though; when pressing the tab key you can focus on elements outside the dialog
-1 in design ..
10/10 in code.
Nice.. and useful
overlay opacity doesn't work in IE, also in IE the height is too high, makes the scroll bar appear. Any way to fix this?
Thanks for this! Will come handy in one of my projects!
thanks, very handy! and save's me a lot of work
Hi,
I want to English language convert to all other language like hindi, Chinese, Japanese
this my id websmart.rawal@gmail.com
is there a way that the alert doesnt force the page up ?
find a bug in it...keep tapping tab button..you will see it