Facebook Style Alert Confirm Box with jQuery and CSS.
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.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


36 comments:

  1. Great post!
    Thanks

    ReplyDelete
  2. 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
  3. Very nice, thanks for the share.

    ReplyDelete
  4. Thanks for the idea. really creative :)

    ReplyDelete
  5. Very good. Thanks for share.

    ReplyDelete
  6. Very cool and useful.
    Thank you.

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

    ReplyDelete
  8. Thanks for this useful article. Best regards.

    ReplyDelete
  9. 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
  10. wow great... this code is what i've been looking for! : ]

    ReplyDelete
  11. 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
  12. Awesome dude.............!
    Nice work.

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

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

    ReplyDelete
  15. 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
  16. Thanks for this! Will come handy in one of my projects!

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

    ReplyDelete
  18. Hi,

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

    this my id websmart.rawal@gmail.com

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

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

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

    ReplyDelete
  22. 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
  23. Hi Srinivas,

    Thanks a Lot!! Grate work!!

    ReplyDelete
  24. thanks for sharing ur knowledge

    ReplyDelete
  25. Thanks for this ^_^

    ReplyDelete

Make in India