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

8 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete

  2. already i designed it in my blog visit

    http://aitamelearning.blogspot.in/2012/09/jquerycss-code-to-design-post-like.html

    ReplyDelete
  3. @Vydyabhushana,

    I checked your blog. Its great to see young people like you in programming blog.

    I also added you into http://2lessons.com/l/50/programming-blogs-about-php-jquery-css-ajax-mysql

    ReplyDelete
  4. cool lightweight code easy to implement.. I've designed a facebook style friends tagging, still needs improvement. Can you suggest something?

    http://thecodebook.info/phpmysql/facebook-imitation-tag-friends-using-php-and-jquery/

    ReplyDelete
  5. very cute alert box, thanks for sharing!

    ReplyDelete
  6. Thank u working good..

    ReplyDelete
  7. how to display my search results in my website as that of FACEBOOK search results output:
    stephen.aryee@yahoo.com

    ReplyDelete