A modal built out of pure CSS
JavaScript CSS HTML
Latest commit 699ffa5 Jun 6, 2016 @drublic Fix a bug in certain scenarios when the dialog is closed.
Fix a bug in certain scenarios when the dialog is closed.
Permalink
Failed to load latest commit information.
build Set default height to `auto` when scroll is prevented Jun 28, 2015
download Make sure iframes don't interfere with modal events [fixes #199] Nov 9, 2015
examples Add example for stackable modal Jul 11, 2015
plugins Fix CommonJS export in plugin resize Jun 28, 2015
test Make sure iframes don't interfere with modal events [fixes #199] Nov 9, 2015
.editorconfig Update json files to two spaces indention Feb 3, 2014
.gitignore Remove test CSS build from source control Dec 16, 2014
.jshintrc Use jQuery as CustomEvent fallback instead of Bean Nov 18, 2014
.npmignore Add a .npmignore file Mar 6, 2015
.travis.yml Add node.js 0.12 to travis Jun 28, 2015
CHANGELOG.md v1.5.0 May 12, 2016
CONTRIBUTE.md Update CONTRIBUTE.md to reflect latest development changes Apr 23, 2014
FAQ.md Add FAQ for questions we get from time to time. Apr 23, 2014
Gruntfile.js Update node modules Mar 18, 2015
LICENSE.md v1.3.0 Jan 7, 2015
README.md Update README.md Aug 5, 2015
_modal-animations.scss Use !default variables so that they can be easily overridden Dec 20, 2014
_modal-config.scss Minor updates: remove version from CSS files May 22, 2014
_modal-core.scss Set default height to `auto` when scroll is prevented Jun 28, 2015
_modal-element.scss Include a modal--fade by default to the output Jan 6, 2015
_modal-theme.scss Fix bug on IE11 with close button and overlay of modal Jan 6, 2015
bower.json Add missing comma in bower.json Jul 17, 2015
index.html Fix demo loading in IE8 Oct 4, 2015
modal.js Fix a bug in certain scenarios when the dialog is closed. Jun 6, 2016
modal.scss Move animations into separate SCSS file for better control Oct 12, 2014
package.json v1.5.0 May 12, 2016

README.md

CSS Modals Build Status

Modals built out of pure CSS

Please visit the website to read more about this project and refer to the FAQ in case of a question.

Gratipay me

(aka. Gittip) if you enjoy this plugin.

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 be aware that modals get stacked above each other if you open one modal from within another. You can add a data-attribute data-stackable="false" to the modal in order to make it non-stackable.

Markup

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

<section class="modal--show" 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>

The id attribute is the one which identifies the modal. You can link to this ID from everywhere.

Please note that the ID cannot include the / character since this one is needed for identifying stacked modals.

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.

You link to a modal by simply setting the ID to a link element's href like this:

<a href="#modal">Modal</a>

If you want to decouple the modal call from the location's hash you need to add data-cssmodal-nohash to the link.

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'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;
}

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 (please include jQuery if you need full compatibility).
  • Pressing escape: If you press ESC on your keyboard while the modal is visible it closes itself. This behavior cannot be achieved 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 pushes a CSS class selector to the body element.
  • Being accessible: To get the browser's focus to the modal and back after closing.
  • Firing 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 4+ it is tested pretty well, while Android 2.3 has some problems (biggest issue is scrolling). It's also working on Windows Phone 8.

In numbers:

  • Chrome
  • Firefox
  • Safari 6.x
  • Opera 12+
  • Internet Explorer 8 (functional, include jQuery if you want support for events)
  • Internet Explorer 9+
  • iOS 6
  • Android 2.3 (functional)
  • Android 4.x
  • Windows Phone 8

Media

Please be aware that you need to stop playing videos or audio manually after hiding the modal. We have a plugin for this though.

Events

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.

You can use the events by subscribing to them as if they were click events or something. Here is an example using jQuery:

$(document).on('cssmodal:show', function (event) {
    console.log(event);
});

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

Plugins

We have a couple for the modal to enhance it:

  • Resize - Resizes modal to size of input elements
  • Gallery - A lightbox plugin (in connection with resize)
  • HTML5 Video - Load videos within the modal
  • Maximum Width - Set a custom maximum width on a per-modal basis

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.