Facebook Style Alert Confirm Box with jQuery and CSS.

Facebook Style Alert Confirm Box with jQuery and CSS.



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;
}