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