Jquery tips – Tip 1 – How to display nice popup information messages

Would you like to display beautiful popup messages like this one ?

Now, it’s easier than ever. Just use jquery and the jquery.blockUI.js plugin. You may download the jquery.blockUI.js plugin here. Now, in a we page, add the following scripts in the head section:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

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

You have now added the jquery library and the jquery.blockUI.js plugin in your web page. Lets create a button that when is pressed, a popup message is diplayed. Add the following input button in the body section:

<input type="button" value="press" id="press" />

and the following script in the head section:

<script type="text/javascript">

            $(document).ready(function() {

              $('#press').click(function() {

                    $.growlUI(null, 'Sample message');

               });
   });

</script>

The $.growlUI is the function need for diplaying the popup message. Now, open your web page, press the button and enjoy the result.

From http://www.studentguru.gr/blogs/solidus/archive/2011/05/30/jquery-tips-tip-1-how-to-display-nice-popup-information-messages.aspx