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.

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

Demo: http://9lessons.net63.net/alert_delete.html
Download: http://www.box.net/shared/8cne68kefe
Source: http://9lessons.blogspot.com/2009/08/facebook-style-alert-confirm-box-with.html

Related Listings:

1. Elastic – Make your textareas grow Facebook style jQuery plugin This Jquery plugin makes your textareas grow and shrink to...
2. Reddit-style Voting With PHP, MySQL And jQuery Let’s Get Started We need a table in the database...

Do you like this post?

Email: