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.

But even though modal windows often include vital information, developers repeatedly make it using JavaScript, which does not yield ideal results as compared to the preeminent practices of progressive development. That is why designers should create modal windows using HTML5 & CSS3 in order to avoid any issues. This post will give you a step-by-step guide as to how to create an aesthetic and functional modal box via HTML/CSS.

  • 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.

Laying Down the HTML

  • 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.

Styling the Modal Box

  • 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.

Function and Appearance

  • 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.

The Close Button

Leave a Comment

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.