Facebook Style Alert Confirm Box with jQuery and CSS

                 

Create a facebook style alert box with jquery plug-in jquery.alert.js. Bellow is the complete tutorial

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) { $("#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;

}