Build Modals Using Pure CSS With CSS Modal

In web design, you need to have good content organization. This helps to give the users more readable and functional information. You can do this by building a neat and tidy layout on the website. To organize the content, there are many interface elements and structures you can use, and modal dialog is one of them.

If you’ve been creating modal dialog with jQuery or other plugins, we’ve got some good news for you. With CSS Modal library, you’ll only need pure CSS.

Hans Christian Reinl, the one who developed CSS Modal, has included a lot of advantages that come with it. Some of the advantages are that it can be used as a SASS plugin, there’s cross browser support, it’s optimized for mobile, it can be inserted with media (image, video and sound), and it’s small and fast.

Almost all modern browsers support CSS Modal. It has been tested on Chrome, Firefox, Safari 6, Opera 12, IE8, IE9+, Windows Phone 8, iOS 6 and Android. While it still has minor problems for Android 2.3 (scrolling being the biggest issue, at the time of writing), it still works well.

Recommended Reading: 50 Useful CSS Snippets Every Designer Should Have

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:

 <section class="semantic-content" id="modal-id" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true"> <div class="modal-inner"> <header id="modal-label"><!-- Header --></header> <div class="modal-content"><!-- The modals content --></div> <footer><!-- Footer --></footer> </div> <a href="#!" class="modal-close" title="Close this modal" data-close="Close" data-dismiss="modal">×</a> </section>

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.

 <head> .. <link rel="stylesheet" href="css/modal.css"> .. </head>

Additional Javascript

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

Issues with IE 8 compatibility

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.

 <script type="text/javascript" src='js/modal.js'></script>

Final Thought

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.