Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Popup with jQuery: How to use Reveal plugin

See in this article how to create customized jquery popup using jQuery Reveal plugin.

In application development, regardless of type or platform, it is common to need to, at some point, display messages to the user, whether for informational purposes or to indicate an error has occurred.

In web pages, we are accustomed to the famous alert function, which displays a text message on the screen and only has a standard appearance (but which can vary between browsers). This is nonetheless an efficient function, for its simplicity and compatibility with all major browsers, as a native function of the JavaScript language. But when we seek a more elegant interface, the alert function falls short. As an example, let's see how the message with the alert function in Internet Explorer 9 (Figure 1) is presented.

Figure 1. Alert appearance in Internet Explorer 9 browser

When we need to improve the appearance of these messages, we must choose to apply CSS formatting, for example, but the message displayed by the alert function cannot be customized to this point, which makes us refer to custom functions or third-party plug-ins (there are a lot available for free).

In this article, we will see a very efficient plugin option, called Reveal, which can be downloaded freely from http://zurb.com/playground/reveal-modal-plugin and allows us to create modal windows (popups) with stylish interface and animationeffects.

There are several ways to display the website content beautifully and at the same time functionally. Other than that, it is important to always think about the user experience, and to ease the way information is displayed and delivered.

In the beginning, there were the notorious Web Pop-ups, which only hindered navigation, and irritate users. The worst thing is that these type of features are used to this day and many people simply do not know they exist because of blockers that are already part of modern browsers.

But now you can create a beautiful and functional at the same time effect to open extra information on the screen without impairing the navigation ...

Getting the Plugin

To use Reveal, you must first access the http://zurb.com/playground/reveal-modal-plugin address and click the "Download the Reveal kit" on the right side of the screen, as shown in Figure 2.

Figure 2. Download the Reveal plugin

By clicking the button indicated the file "reveal.zip"will be downloaded, which contain all files needed to use the plugin as well as an HTML file that contains some useful examples.

We must save this file in any folder and extract its contents. Along with JS, CSS and image plugin, comes a version of the file 1.4.4 of the jQuery library, necessary to the operation of Reveal.

Using Reveal

Having downloaded the plugin and extracted the necessary files, we can create a file with HTML extension to test its functionality.

In the header of this file, we need to reference the CSS and JavaScript files and jQuery plugin (we can use the jquery-1.4.4.min.js file that comes with the plugin or use the latest online version), as seen in Listing 1.

Listing 1. Referencing the plugin files

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Popup with Reveal plugin</title>


		<!-- Plugin CSS -->
		<link rel="stylesheet" href="reveal.css">	
		<!-- jQuery Lib -->
		<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
		<!-- Plugin's JS -->
		<script type="text/javascript" src="jquery.reveal.js"></script>
	</head>
	<body>
		
	</body>
</html>

With imported files, the next step is to create the message itself. A modal window is created from an HTML element, in this case a div to which we must assign an id and CSS "reveal-modal" class.

Within that div, we can enter the message content, such as title and text, plus a charge button to close the window, which is made from an anchor tag (<a>) with the class "close-reveal-modal" .

Below, in Listing 2, we see the complete syntax of the div element that will represent the modal window.

Listing 2. Div representing a modal window

<div id="modalWindow" class="reveal-modal">
<h1>Window Title</h1>
<p>Message Content</p>
<a class="close-reveal-modal">×</a>
</div>

If we open the document in the browser, we see that the div is not visible because it appears only in the form of popup when the plugin function is invoked.

Finally, we need just to display the popup to see the plugin working. This can be done in two ways: using the data-reveal-id attribute on the element that will open the window or via jQuery.

Let us begin the first form, which is to assign the id of the div we created to the attribute (data-attribute) data-reveal-id of another element (anchor) which will be responsible for displaying the popup. In Listing 3, we see the use of syntax in an anchor tag that will open the div windowModal using Reveal.

Listing 3. Displaying a modal window from an anchor tag

<a href="#" data-reveal-id="modalWindow">
Show Message
</a>

Now if we open the document in the browser and we click on the link "Show message", we will see the popup appears, as shown in Figure 3.

Figure 3. Popup opened from a link

The second way is to insert a JavaScript/jQuery code snippetto call the Reveal function. To illustrate this method, we can insert a button in the document body and treat your click event.

In Listing 4, we have a button instance that can be inserted anywhere in the page body.

Listing 4. Button to display the popup.

<button id="msgButton">Show popup message</button>

Now, you can insert the following snippet of JavaScript code in the page head.

Listing 5. Treating the onclick event of the button

<script type="text/javascript">
	$(function(){
		$("#msgButton").click(function(){
			$("#modalWindow").reveal();	
		});		
	})
</script>

With this, click the button, the reveal() function is called from the div modalWindow, resulting in the same effect as seen in Figure 3.

Other Reveal Examples

If you'd like to see how your popups fit with different contents like figures, videos or even whole forms, just put them into a div and call the same way as shown with text and so on. For example, consider the code shown in Listing 6.

	<head>
		<meta charset="utf-8" />
		<title>Reveal Demo - Video</title>
		
		<!-- Attach our CSS -->
	  	<link rel="stylesheet" href="reveal.css">	
	  	
		<!-- Attach necessary scripts -->
		<!-- <script type="text/javascript" src="jquery-1.4.4.min.js"></script> -->
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
		<script type="text/javascript" src="jquery.reveal.js"></script>
		
		<style type="text/css">
			body { font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif; }
			.big-link { display:block; margin-top: 100px; text-align: center; font-size: 70px; color: #06f; }
		</style>
		
	</head>
	<body>
	
		<a class="button large big-link" href="#" data-reveal-id="myVid">Click to Watch</a>

		<div class="reveal-modal xlarge open" id="myVid" data-reveal="" aria-hidden="false">
			<h2>MrBool - The website for all developers</h2>
			<p>I set this Foundation Reveal modal to <code>xlarge</code> so you can view the video better. This is a presentation of some courses at MrBool:<br> 
				<div class="flex-video widescreen" style="display: block;">
					<iframe src="https://www.youtube.com/embed/AJEPVtKDtJM" height="415" width="760" allowfullscreen frameborder="0"></iframe>
				</div><br> 
				<a class="close-reveal-modal">×</a>
			</p>
		</div>
			
	</body></html>

In this example, we're creating a simple div with an embedded YouTube video inside an iframe and another link with its data-reveal attribute connecting with div's id. The result of this can be seen in Figure 4.

Figure 4. YouTube embedded video example

Conclusion

This type of plugin ensures to our web applications a distinctive visual, fleeing a bit pattern which most users already tired of. And considering the current scenario where the appearance of the software has been a decisive factor for the end user, it is easy to see the importance of this type of tool in everyday life of the developer.

In the plugin site, you can find more information about its use, as parameters to customize the animation with which the modal window is displayed on the screen, the duration of this animation and the popup may or may not be closed when you click out of it .


Web developer and passioned for web design, SEO and front end technologies.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login