Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

jQuery Tips – How to Display Popup Information Messages

DZone's Guide to

jQuery Tips – How to Display Popup Information Messages

· Java Zone
Free Resource

Download Microservices for Java Developers: A hands-on introduction to frameworks and containers. Brought to you in partnership with Red Hat.

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

image

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.

Download Modern Java EE Design Patterns: Building Scalable Architecture for Sustainable Enterprise Development.  Brought to you in partnership with Red Hat

Topics:

Published at DZone with permission of Nikos Printezis, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}