Skip to content

Latest commit

 

History

History
executable file
·
15 lines (9 loc) · 870 Bytes

README.md

File metadata and controls

executable file
·
15 lines (9 loc) · 870 Bytes

HTML5/CSS3 Modal

About

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

Demo

http://cameronbaney.com/tutorials/css3modal/