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!

Examples

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

Read more in this demo A demo with some pictures View a video demo

Pages Using CSS Modal

Check out these pages, that use CSS Modal already.

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:

  • IE 8 compatibility.
  • Pressing escape: If you press ESC on your keyboard while the modal is visible it closes itself. This behavior cannot be done with CSS only.
  • Preventing background page from scrolling: If you scroll within the modal and you reach the end you don't want the page in the background to scroll. To prevent this JavaScript pushs a CSS class selector to the body element.
  • Being accessible: To get the browser's focus to the modal and back after closing.
  • Fireing events: When a modal opens a custom event is fired called cssmodal:show. When the modal is hidden, an event called cssmodal:hide is triggered.

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: Chrome, Firefox, Safari 6, Opera 12, IE8 (functional), IE9+. And iOS 6, Android 2.3+.

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.

License

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

Contributors

This is a project by Hans Christian Reinl.

A special thanks goes out to @helloanselm and @derSchepp for providing feedback and contributions in general.