Free Source Code and Tutorials

Custom Search

How to Create a Facebook Style Alert Confirm Box with jQuery and CSS

fbAlerIn this tutorial, you will learn how to create a Facebook Style Alert Confirm Box with jQuery and CSS. This is a simple implementation of jQuery and CSS that overides the old alert box.


These are the following jQuery plugins that you should put.

<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.alerts.js"></script>


Let’s begin:


  • Create a page and name it “facebook.php“.
  • Create a style for the pop-up message:
<style type="text/css"> /* pop up id */
#popup_container {
 margin: 0;
 padding: 0;
 height: 100px;
 background: #f0ecec;
 border: solid 1px #dedede;
 border-bottom: solid 2px #456FA5;
 color: #000;

/* pop message */
#popup_message {
/*padding-top: 15px;*/
 padding-left: 15px;

/* pop up panel id */
#popup_panel {
 text-align: left;
 padding-left: 15px;
 padding-bottom: 0;

/* for the button in the pop up message */
input {
 background-color: #554df7;
 padding: 3px;
 color: #FFF;
 margin-top: 20px;
 margin-right: 10px;
/* for the image in the wrap */
#wrap > img{
height: 100%;
width: 100%;
  • Do these following codes for the box with a close link.
<div><h1>Facebook Style Alert Confirm Box with jQuery and CSS.</h1></div> 
<div id="wrap" style=" background-color:#fff; border:1px solid #dedede; height:100px; width:300px;">
 <div style="float:right; width:60px; height:20px"><a href="#" id="Close" >Close</a></div>
 <img src="Liza.jpg" >
  • Create a method for calling the pop-up message.
<script type="text/javascript"> 
 $(document).ready( function() {
 $("#Close").click( function() 
 /* confirm messaage */
 jConfirm('Are you sure you want to Close this thread?', '', 
 function(f) {




For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :


Email –
Mobile No. – 09305235027 – tnt


Download Sourcecode

Facebook Comments
(Visited 7 times, 1 visits today)
Share this

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked * © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!

%d bloggers like this: