Wednesday, February 20, 2013

Facebook style Custom Alert Box design using simple jQuery and CSS

We all use alert and confirm boxes in JavaScript to make our web application more informative. But we all have seen that whenever we use them, by default a very simple, old fashioned window pop up appears. So today we will use jQuery and CSS to change the look of these popup boxes. Very simple jQuery and CSS is used to accomplish it.
Facebook style custom Alert box design CSS and jquery
We have given our alert and confirm box, look similar to that on Facebook. You can very easily customize it as per you website's interface, by doing some minor changes in the CSS. This is the simplest way to implement this.


In this tutorial we have used the alerts.js jQuery file by abeautifulsite. And we have customized it a little bit to produce even better output. Whenever you need to use any confirm or alert box, you will have to add the below JavaScript code on your page.

  JavaScipt :  


$(document).ready( function() {
$("#delete_confirm").click( function() 
{
 jConfirm('Are you sure you want to delete ?', 'Popup Box Title', function(r)    {
  if(r==true)
 {
 $(".container").fadeOut(300);
}
}); });
});

We have used a small CSS to style the Popup box which appears on the click event. Below is the CSS code.

  CSS :  


.container {
width:500px;
margin:100px auto;
border:solid 1px #eee;
text-align:center;
padding:20px;
}

#popup_container {                    // Popup Box complete
font-family:'Lucida Grande',arial;
font-weight:bold;
text-align:left;
font-size: 12px;
width: 364px;  
background: #F3F3F3;
border:solid 1px #dedede;
border-bottom: solid 2px #456FA5;
color: #000;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

#popup_title {       // Title of the Popup Box
background-color:#476EA7;
padding:10px;
color:#ffffff;
}

#popup_message {      //Holds the message displayed in popup box        
padding:10px;
background:#ffffff;
}

#popup_panel {         //this div holds the Buttons
text-align: right;
padding-left:10px;
padding-bottom:10px;
}

#popup_ok {              //styling for OK button
background-color:#476EA7;
padding:3px;
color:#FFFFFF;
margin-top:10px;
margin-right:5px;
border:solid 1px #888888;
font-weight:bold;
}

#popup_cancel {            //styling for Cancel Button     
background-color:#fcfcfc;
padding:3px;
color:#000000;
margin-top:10px;
margin-right:10px;
border:solid 1px #888888;
font-weight:bold;
}

So this was it, a very simple way to customize the look and feel of your alert and confirm boxes as per your website's theme. Do experiment with the CSS, to create even more interesting Alert and Confirm boxes. For any problem, please comment.


3 comments:

  1. thanks for the tutorial but how do i use this on my site i have php image upload and its have delete button how do i use this with it

    ReplyDelete
  2. it doesn´t work, any suggestion???

    ReplyDelete