Jquery tips – Tip 1 – How to display nice popup information messages
Join the DZone community and get the full member experience.Join For Free
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:
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:
$.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.
Opinions expressed by DZone contributors are their own.