CSS Modals

Modals built out of pure CSS

Please visit the website to read more about this project.

What is it

Built with pure CSS: CSS Modal is built out of pure CSS. JavaScript is only for sugar. This makes them perfectly accessible.

Optimized for mobile: The modals are designed using responsive web design methods. They work on all screen sizes from a small mobile phone up to high resolution screens.

Use as Sass plugin: You can use CSS Modal as Sass plugin and apply it to your custom classes. No need to understand all the code.

A few other advantages: accessible, cross-browser, media-adaptive, small and fast!

How to use

Please visit the website's section on how to use CSS Modals.

Browser Support

This modal is designed to work on all modern browsers. This does not include Internet Explorer 7 or lower.

Heads up

Please be aware that you need to stop playing videos or audio manually after hiding the modal.

There is an event cssmodal:show fired on the modal itself after the modal is shown. Another event cssmodal:hide is fired after the modal is hidden.

There events are not fired in IE8. Please be aware of that and use jQuery or something else to create custom events.

Bug reports and feature requests

If you got something that's worth including into the project please open an issue for further discussion.

Please see the section on contributing on the website.

Contributors

This is a project by Hans Christian Reinl. Thanks goes out to all other contributors.