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, stackable, small and fast!

Examples

Check out the following examples of the CSS Modal. Please view the source on GitHub and the documentation below.

Text Photo Gallery Video / iframe Stackable Modal

How to use

Please refer to the README file on GitHub to get the latest info on how to use.

The easiest way to install CSS Modal's files is with Bower.

bower install --save css-modal

Markup

You need to include the markup and content for modals in you website. This has a positive effect on SEO. The example code:

<section class="semantic-content" id="modal-text" 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>

Using header and footer is optional. Just remove the tags if you don't want them in a modal.

You should leave the link's href attribute that way to close the modal in order to prevent the page from scrolling to top when clicking on it.

Please remember to set a unique ID for the header and change the aria-labelledby attribute to the same value.

Sass

If you use Sass you can use the file modal.scss and include it into your project. Here is an example:

@import "modules/modal";

CSS Modals uses Sass 3.2's placeholders. You can use them by calling them via @extend in your modal's class name. The snippet looks something like that:

.my-awesome-class-name {
@extend %modal;
}

CSS

If you are not into Sass you can still use Vanilla CSS. Include the file in your CSS and don't forget to add it to your build process. Here is the snippet for development:

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

You can now add the markup to your website as stated above and apply a class .modal to the element.

JavaScript

As stated above you don't need JavaScript to get a good experience out of CSS Modals. But there are some issues where JavaScript helps:

To add this behavior to your website, please include the JavaScript file modal.js right before the closing body-tag:

<script src="js/modal.js"></script>

Browser Support

This modal is designed to work on all modern browsers. Unfortunately this does not include Internet Explorer 7 or lower. But we deal with IE 8 – well,… at least it works.

On mobile Safari for iOS and Android 2.3, 4+ it is tested pretty well, while Android 2.3 has some problems (biggest issue is scrolling) – but it works. It's also working on Windows Phone 8.

In numbers:

Bug Reports And Feature Requests

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

@necolas wrote down some good guidelines for contributing to his projects. Please keep these in mind when contributing to this project. <3

Please use the .editorconfig-file in order to set the right usage of tabs/spaces aso. in your editor. Visit editorconfig.org for more information.

Pages Using CSS Modal

Check out these pages, that use CSS Modal already.

License

This project is under the Open Source MIT license. You can do pretty much everything you want with it.

Authors & Contributors

This is a project by Hans Christian Reinl.

A special thanks goes out to co-maintainer Anselm Hannemann and all other contributors.