top_menu

Sunday, 23 September 2012

Facebook style alert confirm box using jquery and css

.

The following tutorial will help you creating a facebook style alert confirm box using jquery and css. It overrides the classic alert confirm behavior of javascript. This tutorial uses both jQuery and jQuery Alert Dialogs Plugin from abeautifulsite.net.

facebook style alert confirm



The HTML
<div class="container">
<div style="background-color:#f2f2f2;">
<a style="float:left;" href="http://www.2lessons.info"><img src="http://4.bp.blogspot.com/-5RL_78SJKQ8/UFn0JHtE55I/AAAAAAAAAOc/0KzdpV5TAJc/s1600/2lessons-logo.png"/></a>
<a style="float:right;margin:20px 50px 0 0;" href="http://www.2lessons.info/2012/09/how-to-create-google-like-top-bar-using.html"><h2>Tutorial Link for facebook type alert confirm box</h2></a>
<div style="clear:both;">.</div>
</div>
<div align="center" id="divDelete">
Click on the close button to delete this post
        <a href="#" class="closeButton" id="deleteConfirm"></a>
</div>
</div>

The Javascript
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery_facebook.alert.js"></script>
<script type="text/javascript">
$(document).ready( function() {
    $(".closeButton").click( function() 
    {
        jConfirm('Are you sure you want ot delete this post?', 'Confirmation Dialog', 
        function(r) {
        if(r==true)
        {
            $("#divDelete").fadeOut('slow');
        }
        });
    });
});
</script>

The CSS
#divDelete{
/* style for the div with notify button*/
font-size:15px;
width:670px;
margin:30px auto;
height:30px;
padding:15px;
font-weight:normal;
background-color:#e2e2e2;
border-bottom:2px solid #d73b96;
}
.deleteConfirm{
color:#666;
width:150px;
font:bold 75% arial,sans-serif;
text-decoration:none;
padding:10px 10px 10px 10px;
display:inline-block;
text-align:center;
border:solid 1px #dcdcdc;
margin:25px auto;
}
.deleteConfirm:hover{
color:#333;
border-color:#999;
}
.closeButton{
/* close button */
float:right;
height:16px;
width:16px;
margin-top:6px;
background:url(images/close.gif) no-repeat;
}
.closeButton:hover{
background:url(images/closehover.gif) no-repeat !important;
}
#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 #d73b96;
color: #000;
}

#popup_title {
display:none;
}

#popup_message {
padding-top: 15px;
padding-left: 15px;
}

#popup_panel {
text-align: left;
padding-left:15px;
}
input
{
background-color:#d73b96;
padding:3px;
color:#FFFFFF;
margin-top:20px;
margin-right:10px;
}