CooL & Sexy yet Easy Message Box using jQuery

With the advent of Web 2.0 the website now gotten more interactive. Now a days website are elegant in looks. And it really hurts (hard works) to create a nice interactive website. jQuery grants us the wish - "write less do more".

jQuery is very easy to learn and implement. Today I am gonna show you how to add a jQuery UI component easily to your website.

First of all let us first see what do we need. We need the jQuery UI component.
Secondly, you need an editor to edit and write your website.
Lastly, you need some hard works.

After downloading first extract the zip file and go to the following directory -
jquery-ui-1.7.2.custom\development-bundle\ui
Now as we are going to work with only dialog (jQuery know them as dialog) so we only need some part of the total ui system. These are -

• ui.core.js
• ui.draggable.js
• ui.resizable.js
• ui.dialog.js

Why do we need these? Well they are pretty much self explained. We need the core by default. We are making our message box draggable and resizable. And lastly we need the specific dialog component.

We also need to add the jquery-1.3.2.min.js and jquery.bgiframe.js.

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/ui.core.js"></script>
    <script type="text/javascript" src="js/ui.draggable.js"></script>
    <script type="text/javascript" src="js/ui.resizable.js"></script>
    <script type="text/javascript" src="js/ui.dialog.js"></script>
    <script type="text/javascript" src="js/jquery.bgiframe.js">

</script>

Now we are going to use built in CSS style for the dialog box.

<link type="text/css" href="ui.all.css" rel="stylesheet" />

These are the basic requirements to use the dialog box. Now that we are ready, lets roll.
The message box looks like this -

Actually we create the message box using the html tag <div> . An example -

<div id="dialog" title="here goes your title" style="visibility:hidden">

    <p>here goes your message</p>

</div>
This div is hidden so normally we cant see it when the page loads. Now our last task is to assign the jQuery event such that whenever a page loads the message pops up automatically.

This is done like this -
<script type="text/javascript">
    $(function() {
                    $("#dialog").css("visibility:visible");
        $("#dialog").dialog({
            bgiframe: true,
            height: 600,
            width: 1000,
            modal: true,
            buttons: {
                Ok: function() {
                    $(this).dialog('close');
                }
            }
        });
    }); 
</script>
The first line is the $(function () {}); When the page loads this function is called. So, all other code must reside with it.
the second line contains $("#dialog").css("visibility:visible"); The #dialog finds the element whose id is dialog (that is of course our message div we have created earlier). We now sets the CSS value to visible because now we want the user to see the message box.
The next line creates the dialog box along with height, width and buttons. If you want the message box to be modal (which is most of the cases is) we have to set it to true.

Next step -  just joking. All done. Just refresh your webpage. Amazing, isn't it?
If any question or suggestion please leave a comment. Thanks.