Tuesday, February 9, 2010

Facebook Style Alert Confirm Box

HTML / Javascript 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 type="text/javascript" src="jquery.alert.js

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


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

No comments: