Smooth Alert Control using Jquery

Introduction

We often need to interact with the user at client side for different validation purposes or any other guideline purpose. For all these we prefer an easy, light and simple  techniques. Alerting user at client side must be very pretty because users on the Web are now in a habit of protectiveness in every thing that he face on the web.  I have developed a Message Box using jquery that is very easy to use and looks very pretty. It provides a simple way for developers to raise unobtrusive messages to the end-user. 

Background 

I named it braviMessageBox. This pop up message box  is a floating window that contains  a content area. The dialog window  closed with the 'x' icon by default.

If the content length exceeds the maximum height, a scrollbar will automatically appear. 

Using the code

braviMessageBox is very easy to use: You need to just add a refrence to Jquery and add the braviMessageBox.js file with the  braviMessageBox.css.

A quick code look "How to use" is here   

  <input type="button" id="btnTest" value="Click Me!" onclick="ShowMessage('Testing bravi Message Box..<br />this is a very pretty jquery message box control!');" /> 

Technique used in the js file is just create a DIV element and append it to page BODY.

function ShowMessage(message) {

    $("<div class='msg' id='dvMsg'><table width='100%'><tr><td width='90%'>" + message + "</td><td width='10%' valign='top' style='float:right;text-decoration:none;'><a href='javascript:void();' onclick='closethis(myMessage);'>x</a></td></tr></table></div>").attr('id', 'myMessage').appendTo('body');

    setTimeout("$('#myMessage').fadeOut('slow');", 2900);

    setTimeout("$('#myMessage').remove();", 4000);

} 

Though this message box will disappear after some time but still you can close it. There is the close method.

function closethis(id) {

    $('#myMessage').fadeOut('slow');

    setTimeout("$('#myMessage').remove();", 1000);

}

Now there isjust one css class to postion the Div in the Center of the screen. 

css class is:

 .msg

        {

            background-color: #4f7eaa;

            text-align: left;

            position: absolute;

            top: 35%;

            left: 40%;

            margin-left: -70px;

            width: 350px;

            height: auto;

            padding: 10px 10px 8px 10px;

            -moz-border-radius: 10px;

            -webkit-border-radius: 10px;

            -khtml-border-radius: 10px;

            border-radius: 10px;

        }

Future Programs 

This was my first article on a Forum. Now I aim to continue it and want to enhance this to a similar pop up dialog page.