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.
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.
Having downloaded the plugin and extracted the necessary files, we can create a file with HTML extension to test its functionality.
Listing 1. Referencing the plugin files
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
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>
Listing 5. Treating the onclick event of the button
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.
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
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 .