While surfing the internet and weblogs, you must have come across instances where a dialog box pops up asking your permission to opening the page or asking about your information to continue. These pop up boxes and panes are known as modal windows in web design terminology. Modal windows are employed by developers frequently in a lot of ways such as making a login form, pop-up ads and drawing user’s attention to vital information.
Laying Down the HTML:
To begin with, you need to lay out the initial HTML short but simple. If you observe in the coding show below, there is a straightforward code reading “Open Modal” and a link to the ‘openModal’ div underneath. If you wish to add styles into the modal box, then employ the ‘ID’ in order to link with the ‘modalDialog’ class. After that, you need to add a div tag to enclose your content in the modal box. Last but not least, the link to close up the modal window will be placed.
Styling the Modal Box:
Currently, what you have on hand is a link with ‘div’ viewing underneath. Now you need to start styling the modal window and make it workable. In order to accomplish that, begin with creating the ‘modalDialog’ classes. As shown below, the coding is quite straightforward. Define a fixed position for your modal window so that it will shift downwards when a user scrolls. Then position all four edges to ‘zero’ so that in the event of a dark background, the modal window will extend across the whole screen.
Function and Appearance:
The next step is to define the functionality aspect of the modal window. This is done by adding the “:target pseudo” class. Using the target pseudo class, the display is positioned to ‘block’, which enables the modal box to open when the link is clicked. You also need to code the hover properties so that the link is highlighted when the mouse is moved on it. After taking care o the functionality of the modal box, you need to set the width, position and margins to move the modal window in the center of the webpage. As you can also see in the coding below, there is a nice bit of style given to the modal window via padding, border and a gradient for the backdrop.
The Close Button:
After having styled the modal window and made it operational, the final step is to code the “Close” button to exit the box. The greatest thing about CSS3 and HTML5 is that you can make buttons that are realistic in appearance, but are just pieces of codes. As shown in the coding below, the background button and text positioning is done using ‘text-align’ and ‘line-height’ tags. The placement of the close button is done with the help of ‘absolute’ tag so that it is centered to the webpage.