A pure CSS3 responsive modal
Switch branches/tags
Nothing to show
Clone or download
Cameron Baney
Cameron Baney Change aside to a div
Latest commit dc48913 Sep 18, 2013
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Version 2.0 Sep 18, 2013
README.md Version 2.0 Sep 18, 2013
index.html Change aside to a div Sep 18, 2013


HTML5/CSS3 Modal


CSS3 gives developers the ability to add some advanced features that was once only possible by using JavaScript. You can achieve the same effects and final product using just CSS3 that you could by using JavaScript. Using CSS3 to create a modal window does not take a hit on accessibility because all of the markup is still on the page, it is just hidden to start. You can also create animations using CSS transitions rather than JavaScript. You can even have a button to open and close the modal window using only CSS3 thanks to the :target psuedo-selector.

Version 2 Features

  • Overlay over the background to focus on the modal and to prevent the user from interacting with the site behind the modal.
  • New animation when closing the modal
  • Change the markup from HTML5 to divs