Build Modals Using Pure CSS With CSS Modal

<

In the realm of web design, efficient content organization is a must. It not only makes information more readable for users but also enhances the functionality of your website. Achieving this involves designing a clean, well-structured layout. Numerous interface elements and structures are at your disposal for content organization, one of which is the modal dialog.

For those who have been using jQuery or other plugins to create modal dialogs, we have exciting news. The CSS Modal library enables you to do the same with just pure CSS.

Hans Christian Reinl, the developer behind CSS Modal, has incorporated several beneficial features. Some of its advantages include compatibility as a SASS plugin, cross-browser support, mobile optimization, the ability to incorporate media like images, videos, and sounds, and its compact and speedy nature.

HTML Markup

CSS Modal has three parts to work with: header, content and footer. The header is where you can put the title for the modal. The content is for displaying the important information you want to highlight. This part supports text, pictures and embedded code. As for the footer, you can add additional information here, such as a close button, an open new window button, etc.

To create a modal dialog, you should use the section tag and some predefined data-attributes, class and id. Inside the section tag, an element wrapped with .modal-inner class must be included. Here is the basic markup:

 

 
 

 

 

 
 
 
 ×
 
 

The id in the section tag is used for calling the modal from another function, by a link for example, and the value can be changed as required. a tag on the code, will be used as the modal close button. Attribute of the href should be left as shown above, as it will stop the page from scrolling to the top when clicked.

The header and footer are optional parts, which you may (or may not) include. But please keep in mind, if you use a header, you must add in a unique ID name and change the aria-labelledby attribute to the same value.

Don't forget to include the CSS Modal library, which you can download from its GitHub page, to your project.

 
 ..
 
 ..
 
 

Additional Javascript

There are still some issues when you use CSS Modal with pure CSS, such as:

• Keyboard Escape button to exit
• Scrolling background prevention
• Focus effect to the modal and back to page after closing it

So to fix those problems, javascript is still needed here. Fortunately, CSS Modal has provided you with a lightweight javascript source code for your convenience. Include this code before your closing body tag.

Final Thoughts

Creating modal with pure CSS still has some drawbacks, but it can become an alternate tool to further enrich your website. And you probably want to try something slightly different. With a little creativity, you could make some pretty awesome modals. Give it a shot.