9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Wednesday, August 26, 2009

Facebook Style Alert Confirm Box with jQuery and CSS.

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. 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").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;
}



Recent 20 Articles

Latest 20 Articles on 9lessons

Feel free post a commet.
Comments
{ 36 comments }
Anonymous said...

Great post!
Thanks

Huzzi said...

Great, thanks alot :)

Awlad

Balaji said...

Great article! Thanks for taking the time to explain Facebook Style Alert Confirm Box with jQuery and CSS. I've been thinking about similar topics lately, and it's good to see that I'm not alone. What do you think about JavaScriptMVC – Include?

syafrizal said...

great post...
u're the best..

Srinivas Tamada said...

@ Syafrizal

Thank you

FAQPAL said...

Very nice, thanks for the share.

Wael said...

very useful

Mohamed Amine said...

Thanks for the idea. really creative :)

Hery said...

Very good. Thanks for share.

Henry said...

Very cool and useful.
Thank you.

Hayk Barseghyan said...

how can i change style of comment box for web sites which made facebook... CAn you help

Sedat Kumcu said...

Thanks for this useful article. Best regards.

Darshan Prajapati said...

This code is not synchronous that means whatever you will write after alert call, will be executed before you press delete or cancel button. Can u make it synchronous? That means the things after alert call should execute only after i press delete or execute button. The same problem is with jAlert() function. Solve this one also.!!

ced said...

wow great... this code is what i've been looking for! : ]

ilham said...

great job

Anonymous said...

Firstly, thanks for this great script.
But I have a question. You said that
"You havt to include Ajax funtion for deleting records" in the script and gave a tutorial link. The deleting function works perfectly without alert confirm but I can not combine with this alert confirm script. They did not work together.How can we combine this two scripts? Can you write an example?

Anonymous said...

Awesome dude.............!
Nice work.

Albert said...

Nice!
You need to handle keystrokes though; when pressing the tab key you can focus on elements outside the dialog

Motyar said...

-1 in design ..
10/10 in code.
Nice.. and useful

Anonymous said...

overlay opacity doesn't work in IE, also in IE the height is too high, makes the scroll bar appear. Any way to fix this?

Magnetarmband said...

Thanks for this! Will come handy in one of my projects!

Erwin Nandpersad said...

thanks, very handy! and save's me a lot of work

web smart said...

Hi,

I want to English language convert to all other language like hindi, Chinese, Japanese

this my id websmart.rawal@gmail.com

chaves said...

is there a way that the alert doesnt force the page up ?

Anonymous said...

find a bug in it...keep tapping tab button..you will see it

Nguyễn Văn Vương said...

yes, it a bug

Jethro Larson said...

I thought where is says "Alert" in your screenshot it said "Slut" lol.

toko pancing said...

hi i'm from indnesia and i'm looking for the facebook comments script. wow.. its amazing find your blog. but.. how can we compare with facebook pages?

col3 said...

Nice work Facebook Style :)

col3neg said...

Hi Srinivas,

Thanks a Lot!! Grate work!!

ประเพณี ไทย said...

Thanks for this useful article.

Neil Carlo Sucuangco said...

U
S
E
F
U
L

Aditya Amit said...

You are always outstanding!

Anonymous said...

thanks for sharing ur knowledge

MyShayari said...

Thank you Srinivas, Nice post.

Anonymous said...

Thanks for this ^_^

Post a Comment