Modals

Modal dialogs are pop-up windows that appear on a website, overwriting the content beneath the dialog. In general, they are forms for the user to complete for tasks such as editing a customer or selecting airlines. W3.CSS allows you to create a modal form and keep it hidden until some button or action triggers the modal to display.

Creating a modal dialog

To create a modal dialog, you need to use the w3-modal class for the container <div> that will hold the modal dialog’s contents. You will also need to ensure that this container has a unique ID, since you’ll need it to open the modal dialog. The following code snippet shows the basic setup for the modal container.

Code Listing 64

The actual content of the modal dialog is wrapped within the w3-modal-content class. The wrapper structure looks as shown in the following.

Code Listing 65

Displaying the modal

To display the modal dialog, you will need some simple JavaScript and a button. For example, if we wanted to display the Contact Us modal dialog, we could use the following code.

Code Listing 66

When the user clicks the Contact Us button, the modal dialog’s display style is set to block, causing the dialog to pop up on the user screen.

Animating the display

The modal dialog will suddenly pop up on the screen. While this is common in websites, it can sometimes have a jarring effect. You can take advantage of the animation classes to present a smoother appearance of the modal. Simply add the desired animation class to the container <div>, as follows.

Code Listing 67

This will cause the modal dialog to fade in, rather than just quickly appear.

Closing the modal dialog

Once the modal dialog is opened, it will stay on the screen (since the display style is now set to block). You will need to add some imbedded JavaScript code to allow the user to close the modal dialog. Typically, this is triggered by clicking the X icon in the upper-right corner, although if the modal dialog saves information, you would put the close code into the buttons that save and/or cancel the dialog.

Code Listing 68

Summary

Modal dialogs are typically used to overlay the website and provide a dialog for the user to focus on. The framework requires a little additional markup and some JavaScript to open and close the dialog.

Animating the dialog opening will add a smoother feel to the site, and you should consider adding one of the animation classes to the modal container.