Facebook Style Alert Confirm Box with jQuery and CSS


                 

Create a facebook style alert box with jquery plug-in jquery.alert.js. Bellow is the complete tutorial

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) {

$("#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; }

3 thoughts on “Facebook Style Alert Confirm Box with jQuery and CSS

  1. I think that what you published was very logical. However, think on this,
    suppose you were to create a killer post title? I mean, I don’t wish to tell you how to run your blog, however suppose you added a post title to possibly grab folk’s attention?
    I mean Facebook Style Alert Confirm Box with jQuery and CSS |
    Swadesh Programming Blog is a little vanilla.
    You should glance at Yahoo’s home page and watch how they create post titles to grab viewers to open the links. You might try adding a video or a related picture or two to get readers excited about everything’ve written.

    In my opinion, it might make your posts a little livelier.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s