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