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

DZone 's Guide to

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

· Web Dev Zone ·
Free Resource

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');




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


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}