Custom Alert Message

Custom Alert message is new dynamic section which is used in almost every website. This message is used to replace the default alert message which is triggered from Javascript i.e. window.alert. I will show how both the images look like..

You can see the difference between the above two images 1st image looks odd which the second image looks excellent. We customize the message in out own fashion which is an advantage.
The first step in designing this message is use the same old but useful "div" tag. Since Content is simple i will directly post the div content code here..
    <div id="divWindow">
        <table style="width:100%">
            <tr>
                <td colspan="2"  style="border-bottom:thin solid gray">
                    <img id="imgClose" src="Close.jpg" width="20px" height="20px" align="right" />                    
                td>
            tr>            
            <tr>
                <td colspan="2">
                    <p>
                        This is an alert message from the Web Site Please Check your User Name and Password.p>
                td>
            tr>
            <tr>
                <td align="right" style="width:50%">
                    <input id="btnOk" type="button" value="ok" style="width:60px" />
                td>
                <td align="left">
                    <input id="btnCancel" type="button" value="Cancel" />
                td>
            tr>
        table>
    div>​ 
If you run the div in Html we would get an awkward design like shown below

Div Without Styles

Now we will apply some styling to the above div to make it look good by default so that we can use anywhere.
#divWindow
{
    width:0px;
    height:100%;
    border:thick solid gray;
    position:relative;
    top:0px;
    left:500px;
    visibility:hidden;
    z-index:99;
}
table
{
    visibility:hidden;
}
​ I used Visibility as Hidden in order to display dynamically if you use visibility as visible for both div and table we would get that message which i showed above.
I used table as hidden because i want to display the content after the div is loaded which is implemented using jQuery.
Now what we will do is that display the alert message with some animation such that the message expands from the middle of its width. Hence i set the width to 0px initially in the css as u can see the above css code.From 0px we will increase it to 400px to display the full message.
Here is the default web page

Initial Web Page

Here are the entire sequence of events which took place while loading the message dynamically.

With width 0px

With Width like 100px

After Div Loaded

After Table i.e. entire Content loaded

Here is the code for javascript which i have written while clicking the Custom Alert button. 

var count=0;
        $(document).ready(function () {
             $("#btnClick").click(function () {
             if(count==0)
             {
                $("#divWindow").css("visibility","visible");
                $("#divWindow").animate(
                {
                    width:'400px',                    
                    left:'-=200px'                  
                }, "fast",function (){
                    $("table").css("visibility","visible");
                });
              }
              count=1;
            }); 

Since the event should take place once every time i used count. Actually we are not expanding the div, we are showing the effect by expanding the width from 0px to 400px and simultaneously moving the div to left side. From the above code u can see left i.e. -=200px which is half of the width of the div content.

Again when the user clicks the cancel button we have to reinitialize all the css properties so that the again when we have to show the message we have to display using the initial setting.

$("#btnCancel,#imgClose").click(function(){
                $("#divWindow").css("visibility","hidden");
                $("#divWindow").css("width","0px");
                $("#divWindow").css("left","500px");
                $("table").css("visibility","hidden");
                count=0;
            });
            $("#btnAlertClick").click(function(){
                window.alert("This is an alert message from the Web Site Please Check your User Name and Password.");
            });
        });​ 

Window.alert is the default javascript message.

Here is the entire javascript don't forget to use the jQuery library
var count=0;
        $(document).ready(function () {
             $("#btnClick").click(function () {
             if(count==0)
             {
                $("#divWindow").css("visibility","visible");
                $("#divWindow").animate(
                {
                    width:'400px',                    
                    left:'-=200px'                  
                }, "fast",function (){
                    $("table").css("visibility","visible");
                });
              }
              count=1;
            });
            $("#btnCancel,#imgClose").click(function(){
                $("#divWindow").css("visibility","hidden");
                $("#divWindow").css("width","0px");
                $("#divWindow").css("left","300px");
                $("table").css("visibility","hidden");
                count=0;
            });
            $("#btnAlertClick").click(function(){
                window.alert("This is an alert message from the Web Site Please Check your User Name and Password.");
            });
        });​ 

Here is the Working Link for the above Custom Alert Message http://jsfiddle.net/prabhavithreddy/ZvCE8/2/