Facebook Style Alert Confirm Box with jQuery and CSS.
Wall Script
Wall Script
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.
web notification

36 comments:

  1. AnonymousAugust 26, 2009 at 9:41 AM

    Great post!
    Thanks

    ReplyDelete
  2. HuzziAugust 26, 2009 at 10:33 AM

    Great, thanks alot :)

    Awlad

    ReplyDelete
  3. BalajiAugust 26, 2009 at 4:40 PM

    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?

    ReplyDelete
  4. syafrizalAugust 27, 2009 at 7:40 AM

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

    ReplyDelete
  5. Srinivas TamadaAugust 27, 2009 at 9:17 AM

    @ Syafrizal

    Thank you

    ReplyDelete
  6. FAQPALAugust 28, 2009 at 6:40 PM

    Very nice, thanks for the share.

    ReplyDelete
  7. WaelAugust 30, 2009 at 6:37 AM

    very useful

    ReplyDelete
  8. Mohamed AmineSeptember 2, 2009 at 11:26 PM

    Thanks for the idea. really creative :)

    ReplyDelete
  9. HeryOctober 10, 2009 at 8:13 AM

    Very good. Thanks for share.

    ReplyDelete
  10. HenryNovember 29, 2009 at 9:19 PM

    Very cool and useful.
    Thank you.

    ReplyDelete
  11. Hayk BarseghyanJanuary 5, 2010 at 6:33 AM

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

    ReplyDelete
  12. Sedat KumcuJanuary 22, 2010 at 8:45 AM

    Thanks for this useful article. Best regards.

    ReplyDelete
  13. Darshan PrajapatiFebruary 16, 2010 at 3:08 AM

    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.!!

    ReplyDelete
  14. cedJune 12, 2010 at 4:03 AM

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

    ReplyDelete
  15. ilhamJuly 12, 2010 at 4:30 AM

    great job

    ReplyDelete
  16. AnonymousOctober 14, 2010 at 3:27 PM

    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?

    ReplyDelete
  17. AnonymousJanuary 30, 2011 at 5:26 PM

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

    ReplyDelete
  18. AlbertFebruary 1, 2011 at 10:37 AM

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

    ReplyDelete
  19. MotyarFebruary 15, 2011 at 6:39 AM

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

    ReplyDelete
  20. AnonymousFebruary 23, 2011 at 9:46 PM

    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?

    ReplyDelete
  21. MagnetarmbandMay 22, 2011 at 12:20 PM

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

    ReplyDelete
  22. Erwin NandpersadJuly 24, 2011 at 11:16 AM

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

    ReplyDelete
  23. web smartJuly 29, 2011 at 2:52 AM

    Hi,

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

    this my id [email protected]

    ReplyDelete
  24. chavesOctober 26, 2011 at 1:27 PM

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

    ReplyDelete
  25. AnonymousDecember 30, 2011 at 5:20 PM

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

    ReplyDelete
  26. vuongtalksSeptember 10, 2012 at 10:46 PM

    yes, it a bug

    ReplyDelete
  27. Jethro LarsonSeptember 30, 2012 at 5:26 PM

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

    ReplyDelete
  28. toko pancingOctober 13, 2012 at 2:03 PM

    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?

    ReplyDelete
  29. col3October 31, 2012 at 1:07 PM

    Nice work Facebook Style :)

    ReplyDelete
  30. col3negDecember 18, 2012 at 11:25 AM

    Hi Srinivas,

    Thanks a Lot!! Grate work!!

    ReplyDelete
  31. toodtvJanuary 25, 2013 at 12:24 AM

    Thanks for this useful article.

    ReplyDelete
  32. UnknownFebruary 23, 2013 at 11:11 AM

    U
    S
    E
    F
    U
    L

    ReplyDelete
  33. Aditya AmitJune 21, 2013 at 1:44 AM

    You are always outstanding!

    ReplyDelete
  34. AnonymousJuly 13, 2013 at 4:42 AM

    thanks for sharing ur knowledge

    ReplyDelete
  35. MyShayariDecember 29, 2013 at 12:52 PM

    Thank you Srinivas, Nice post.

    ReplyDelete
  36. AnonymousJanuary 26, 2014 at 10:10 PM

    Thanks for this ^_^

    ReplyDelete

Most Popular Posts

mailxengine Youtueb channel
Facebook and Google Login
Make in India
X