Wednesday, February 16, 2011

Facebook Style Alert Confirm Box with jQuery and CSS


I received a request from my reader that asked to me how to implementfacebook style alert box. so I had designed Facebook Style Alert Confirm Box with jquery plug-injquery.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

Facebook Style Alert Confirm Box with jQuery and CSS.

 Download Script     Live Demo

Facebook 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").clickfunction()
{
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;
}

No comments:

Post a Comment