A modal built with pure CSS, enhanced with JavaScript

Overview

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.

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.

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.

Comments
  • Bower is a pain w/customization

    Bower is a pain w/customization

    Love this, but one problem I have is bower. Bower is very powerful, but for things u really won't touch.

    Tried using this project on bower, but wanted to change a whole load of stuff. Padding on the inner modal div, border color, width, breakpoints etc.

    Maybe one of these days we can actually take advantage of a better package mgt. system. I just don't think we are there yet with them.

    opened by grayghostvisuals 10
  • Page jumps to top

    Page jumps to top

    When you click on one of the examples on the demo page the page jumps to the top. That's not optimal since you have to scroll back down, once you dismiss the modal.

    opened by kahlil 10
  • Stop video when closing the modal

    Stop video when closing the modal

    Hi,

    When I add a HTML5 video and close the modal, the video keeps playing on background.

    <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">
              <video preload="auto" controls poster="video/video.jpg">
                <source src="video/video.webm" type="video/webm">
                <source src="video/video.ogg" type="video/ogg"/>
                <source src="video/video.mp4" type="video/mp4">
              </video>
            </div>
            <footer><!-- Footer --></footer>
        </div>
    
        <a href="#!" class="modal-close" title="Close this modal" data-close="Close"
            data-dismiss="modal">×</a>
     </section>
    

    Should we add some JS to stop the video from playing? I don't find any way to do this with HTML/CSS.

    bug 
    opened by Wakkos 9
  • Bowerizing

    Bowerizing

    Changes and adjustments based on Issue #66 which also includes aspects from #58.

    A couple of notes:

    • Sass vars now have a !default flag allowing authors to override them from an outside source.
    • Theming "plain screen" involves another @extend placeholder (this can be improved upon as we go). The %modal-theme is your general/global defaults. Other separated placeholders can become more specific.
    • Grunt has been given some steroids and now includes MatchDep (So you don't have to add load task commands in your Gruntfile.js) and Live Reload because, hey, we like instant feedback right?
    • Eventually some mixins and functions should be added to manage the complexity/prefix grossness of the transitions and animations etc. Maybe adding auto prefixer would be better suited and a more maintainable option going forward.

    Ok now lets discuss :metal:

    opened by grayghostvisuals 9
  • How to open modal on page load?

    How to open modal on page load?

    Is there a way to open the model on page load instead of by clicking a link?

    (this isn't an "issue" but I'm not sure how to post a question, sorry if I broke protocol)

    bug 
    opened by ScotsScripts 9
  • Not working in IE8 and IE9+

    Not working in IE8 and IE9+

    Hello There,

    I am facing a situation for IE browser all versions. I am having a link to open a modal and another link on that modal to close current modal and open another one. This works perfectly well in rest of the leading browsers, but fails in IE. The processes executes well till opening first modal, but when I click link to open another modal, the first one closes (as expected) but does not opens the second.

    Here is the fiddle link http://jsfiddle.net/seyfso6L/

    Hope this will help to understand the issue. Please have a look.

    Thanks, -Komal

    bug 
    opened by Komald 8
  • Force modal to center of screen

    Force modal to center of screen

    Hi, not sure if its a bug so i'll post it here. When I click a link and it opens a modal, the modal is being shown on the top of the screen (not center of the screen) so i need to scroll up in order to see the full modal. See image attached (when the link is clicked) hris

    (Scrolled up so that I can see everything) hris3

    I'm hoping to get some workaround for this. Thanks!

    needs-feedback 
    opened by abielpaltao 8
  • A simple example

    A simple example

    Hi,

    Im trying to set up a modal example, but I can not get it..

    This is my ALL my code:

      <section class="semantic-content" id="modal-text" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
        <div class="modal-inner">
          <div class="modal-content">
             <!-- <img 1>-->
             <!-- <img 2>-->
          </div>
        </div>
        <a href="#!" class="modal-close" title="Close this modal" data-close="Close" data-dismiss="modal">×</a>
      </section>
    

    A demo with some pictures

    Inside a .scss I have this:

    @import "modal";
      //...
      .content {
        .modal-inner {
        @anselmh extend %modal;
    }
    

    The pictures insde .modal-content are hidden and the markup elements have the modal.scss properties associated , but how to show them when I click on one of them?

    needs-feedback 
    opened by Ziiweb 7
  • Bower install does not include modal.css

    Bower install does not include modal.css

    Hello, I just tried using 'bower install css-modal --save'. The css modal artifact was not included in the install.

    I am not using sass in my project so I would prefer to get the generated css. Is that possible?

    opened by chriscantu 7
  • IE10 on Win7 not showing transition

    IE10 on Win7 not showing transition

    I don't see a transition happening when the modal opens on IE10. I suspect it's the same problem described here:

    http://stackoverflow.com/questions/17576236/ie10-win-7-ignores-css-keyframes-when-within-a-media-query

    The transition is inside a media query, and that's the only thing I can think of that would cause it not to work.

    bug 
    opened by impressivewebs 7
  • Multiple YouTube videos bug

    Multiple YouTube videos bug

    Hi guys,

    I'd like to submit an update request. I'm experiencing a bug when trying to "load" or "use" multiple modal boxes with different YouTube iFrame's each (one vid for each modal).

    However, when I click for instance in modal 1, and then close it (with or without having played the video), and then click to open modal 2 (containing another video), the same video that was on modal one shows up. BUT if I refresh the page, and open modal 2 first, then that video will show up in modal 1 instead.

    Don't understand what's going on... I'm anyways no jQuery expert so... I'd love to know if anyone knows how to fix this.

    Thanks a lot, Santiago Baigorria

    opened by SantzDesign 7
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump loader-utils from 1.2.3 to 1.4.2

    Bump loader-utils from 1.2.3 to 1.4.2

    Bumps loader-utils from 1.2.3 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    v1.4.0

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    v1.3.0

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)
    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump moment from 2.17.1 to 2.29.2

    Bump moment from 2.17.1 to 2.29.2

    Bumps moment from 2.17.1 to 2.29.2.

    Changelog

    Sourced from moment's changelog.

    2.29.2 See full changelog

    • Release Apr 3 2022

    Address https://github.com/advisories/GHSA-8hfj-j24r-96c4

    2.29.1 See full changelog

    • Release Oct 6, 2020

    Updated deprecation message, bugfix in hi locale

    2.29.0 See full changelog

    • Release Sept 22, 2020

    New locales (es-mx, bn-bd). Minor bugfixes and locale improvements. More tests. Moment is in maintenance mode. Read more at this link: https://momentjs.com/docs/#/-project-status/

    2.28.0 See full changelog

    • Release Sept 13, 2020

    Fix bug where .format() modifies original instance, and locale updates

    2.27.0 See full changelog

    • Release June 18, 2020

    Added Turkmen locale, other locale improvements, slight TypeScript fixes

    2.26.0 See full changelog

    • Release May 19, 2020

    TypeScript fixes and many locale improvements

    2.25.3

    • Release May 4, 2020

    Remove package.json module property. It looks like webpack behaves differently for modules loaded via module vs jsnext:main.

    2.25.2

    • Release May 4, 2020

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.5 to 1.0.7

    Bump path-parse from 1.0.5 to 1.0.7

    Bumps path-parse from 1.0.5 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump postcss from 7.0.17 to 7.0.36

    Bump postcss from 7.0.17 to 7.0.36

    Bumps postcss from 7.0.17 to 7.0.36.

    Release notes

    Sourced from postcss's releases.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.32

    7.0.31

    • Use only the latest source map annotation (by @​emzoumpo).

    7.0.30

    • Fix TypeScript definition (by @​nex3)

    7.0.29

    • Update Processor#version.

    7.0.28

    • Fix TypeScript definition (by @​nex3).

    7.0.27

    • Fix TypeScript definition (by @​nex3).

    7.0.26

    • Fix TypeScript definition (by @​nex3)

    7.0.25

    • Fix absolute path support for Windows (by @​tomrav)

    7.0.24

    7.0.23

    • Update Processor#version.

    7.0.22

    • Add funding link for npm fund.

    7.0.21

    • Revert passing nodes property to node constructor.

    7.0.20

    • Allow to pass PostCSS’s nodes in nodes property to node constructor.

    ... (truncated)

    Changelog

    Sourced from postcss's changelog.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    • Add migration guide link to PostCSS 8 error text.

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    • Add migration guide link to PostCSS 8 error text.

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.32

    7.0.31

    • Use only the latest source map annotation (by Emmanouil Zoumpoulakis).

    7.0.30

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.29

    • Update Processor#version.

    7.0.28

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.27

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.26

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.25

    • Fix absolute path support for Windows (by Tom Raviv).

    7.0.24

    • Fix TypeScript definition (by Keith Cirkel).

    ... (truncated)

    Commits
    • 67e3d7b Release 7.0.36 version
    • 54cbf3c Backport ReDoS vulnerabilities from PostCSS 8
    • 12832f3 Release 7.0.35 version
    • 4455ef6 Use OpenCollective in funding
    • e867c79 Add migration guide to PostCSS 8 error
    • 32a22a9 Release 7.0.34 version
    • 2293982 Lock build targets
    • 2c3a111 Release 7.0.33 version
    • 4105f21 Use yaspeller instead of yaspeller-ci
    • c8d02a0 Revert yaspeller-ci removal
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump browserslist from 4.6.2 to 4.16.6

    Bump browserslist from 4.6.2 to 4.16.6

    Bumps browserslist from 4.6.2 to 4.16.6.

    Changelog

    Sourced from browserslist's changelog.

    4.16.6

    • Fixed npm-shrinkwrap.json support in --update-db (by Geoff Newman).

    4.16.5

    • Fixed unsafe RegExp (by Yeting Li).

    4.16.4

    • Fixed unsafe RegExp.
    • Added artifactory support to --update-db (by Ittai Baratz).

    4.16.3

    • Fixed --update-db.

    4.16.2

    4.16.1

    • Fixed Chrome 4 with mobileToDesktop (by Aron Woost).

    4.16

    • Add browserslist config query.

    4.15

    • Add TypeScript types (by Dmitry Semigradsky).

    4.14.7

    • Fixed Yarn Workspaces support to --update-db (by Fausto Núñez Alberro).
    • Added browser changes to --update-db (by @​AleksandrSl).
    • Added color output to --update-db.
    • Updated package.funding to have link to our Open Collective.

    4.14.6

    • Fixed Yarn support in --update-db (by Ivan Storck).
    • Fixed npm 7 support in --update-db.

    4.14.5

    • Fixed last 2 electron versions query (by Sergey Melyukov).

    4.14.4

    • Fixed Unknown version 59 of op_mob error.

    4.14.3

    • Update Firefox ESR.

    4.14.2

    • Fixed --update-db on Windows (by James Ross).
    • Improved --update-db output.

    4.14.1

    • Added --update-db explanation (by Justin Zelinsky).

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v1.5.0)
  • v1.5.0(May 12, 2016)

    • Make sure iframes don't interfere with modal events [fixes #199]
    • Fix jshint issue in modal.js
    • Prevented an extra loop when jQuery is present
    • Improved tabbableElements selector string
    • 9c91b30 Update node modules
    • 300c3ff Fix demo loading in IE8
    Source code(tar.gz)
    Source code(zip)
  • v1.4.1(May 12, 2016)

  • v1.4.0(Jul 8, 2015)

    • Set default height to auto when scroll is prevented
    • Fix CommonJS export in plugin resize
    • Update examples: load async
    • Remove moot version property from bower.json
    • Fix click on modal-close if no hash is present
    • Allow links to surround other html elements
    • Update node modules
    • Add a .npmignore file
    • Add main and style to package.json
    Source code(tar.gz)
    Source code(zip)
  • v1.3.0(Jan 7, 2015)

    Breaking

    • Rename plugins to be more consistend and generate builds for each

    This change might break your existing plugin integrations. In order to fix it, you might want to change the URLs to the stylesheet and JS files of plugins to match the new structure.

    Features

    • Add possiblility to add iframes within modal nicely
    • Add possibility to call modal without hashchange
    • Add new builds for all CSS files
    • Gallery: Add possibility to use iframes in slides
    • Add possibility to make modals non-stackable

    Bug Fixes

    • Hide the close element to prevent overlay of other elements in IE
    • Remove close handler to unset window
    • Bugfix: Use jQuery to subscribe to events to prevent errors with trigger
    • Fix bug on IE11 with close button and overlay of modal
    • Fix height of gallery if caption and footer are present
    • Prevent scrolling of body when modal is open
    • Use correct error message in on-method, add webkit scroll momentum
    • Fix styling of visual test and center content
    • Fix issues with close button on iOS
    • Remove unused lt IE8 hack for scrollbars: fixes respond.js issues

    Improvements

    • Include a build of the spinner CSS
    • Include a modal--fade by default to the output
    • Update word break property of modal content
    • Make left and right navigation buttons in gallery smaller
    • Set inital scale to 1 in visual tests
    • Use !default variables so that they can be easily overridden
    • Update jQuery to v1.11.1
    • Update node modules to latest version
    • Remove test CSS build from source control
    Source code(tar.gz)
    Source code(zip)
  • v1.2.0(Nov 19, 2014)

    • Fix IE8 error with HTML5 video plugin
    • Add images to test/ folder
    • Update core effects and only use necessary prefixes
    • Remove non-core effects of the modal (#161)
    • Use * for files to ignore and include in bower.json
    • Sort JSHintRC file alphabetically
    • Move animations into separate SCSS file for better control
    • Keep focus within modal: avoid non visible focusable elements
    • Plugin resize: Only apply image styles if image is present
    • Add note about / in IDs in README
    • Remove unused height declaration from core
    Source code(tar.gz)
    Source code(zip)
  • v1.1.8(Jun 20, 2014)

  • v1.1.7(Jun 20, 2014)

  • v1.1.6(Jun 20, 2014)

  • v1.1.5(Jun 5, 2014)

  • v1.1.4(Jun 5, 2014)

  • v1.1.3(Jun 5, 2014)

  • v1.1.2(Jun 5, 2014)

  • v1.1.1(Jun 4, 2014)

  • v1.1.0(Jun 4, 2014)

    New features

    • Add different modal animation styles (#51)
    • Register CSSModal as module for AMD (#57)
    • Add function to keep focus in modal when tabbing through (#26)
    • Allow multiple, stackable modals (#20)

    Improvements

    • Use a name for the main component: CSSModal
    • Add gallery thumbnail images to gallery footer
    • Add focus state for close button
    • Better compatiblity for IE8
    • Add polyfill for event.preventDefault to work with IE8
    • Add compatiblity for IE8 (use "bean" library for event handling)
    • Only activate stacked modal if there already is another modal
    • Add HTML5 Shiv for IE8 in visual tests
    • Improve ARIA support
    • Unify close btn on mobile
    • Add error handling to on method to prevent wrong function calls
    • Add option to configure mobile-layout breakpoint
    • Modularize config, core and theme into separate files (#73)
    • Update background transparency image (#67)
    • Rewrite trigger method to use new CustomEvent (#56)
    • Apply all functions directly on the modal-object
    • Rename function _dispatchEvent to trigger
    • Rename function _addEventListener to on
    • Move set and unset of modal in own function
    • Add convenience functions to add and remove classes on elements
    • Add native style momentum scrolling to content area

    Plugins

    • Add folder plugins for extendable modules
    • Add plugin to stretch a modal to 80% of the screen height
    • Implement max width for modal via data attribute
    • Add gallery plugin
    • Add a spinner
    • Add resize plugin
    • Add HTML5 video plugin

    Bugfixes

    • The user can now load/mock Bean during the runtime
    • Fix jumping of the page on devices with small screens (#32)
    • Update body scrolling behavior: Prevent double scroll bar in FF and Co
    • Remove scrollbars for lt IE9 (#67)
    • Fix close button position
    • Correct handling of aria-hidden with JavaScript
    • Prevent overflow in mobile modals
    • Bugfix: Prevent body jump in Chrome Canary
    • Bugfix: UTF-8 problem in Ruby 1.9.3 (#61)
    • Bugfix: open modal on pageload (#46)
    • Prevent body from scrolling when scrolling in modal on iOS and Android (#31)

    Other

    • Add FAQ for questions we get from time to time
    • Update documentation
    • Rename tests directory to test
    • Add better function documentation in JavaScript
    • Update node version to v0.10 when working with Travis
    • Update npm dependencies
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0-beta6(Jun 2, 2014)

  • v1.1.0-beta5(Jun 2, 2014)

  • v1.1.0beta4(May 28, 2014)

  • v1.1.0beta3(May 27, 2014)

  • v1.1.0beta2(May 27, 2014)

    • Fix position of close button when modal is between mobile and table
    • Avoid incorrect rendering of the detail container
    • Correct resizing and positioning in IE8
    • Better compatiblity for IE8
    • Fix magic numbers in resize script
    • Add gallery thumbnail images to gallery footer
    • Only activate stacked modal if there already is another modal
    • Always show gallery arrows on mobile
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0beta1(May 22, 2014)

  • v1.1.0beta(May 22, 2014)

    • Fix max height of modal content
    • Add gallery plugin
    • Add a spinner
    • Add resize plugin
    • Add HTML5 video plugin
    • Use methods for show and hide modal in HTML5 Video plugin
    • Update plugin HTML5 Video to work with AMD definition
    • Use a name for the main component: CSSModal
    • Add focus state for close button
    • Add HTML5 Shiv for IE8 in visual tests
    • Add polyfill for CustomEvents
    • Update node version to v0.10 when working with Travis
    • Improve ARIA support
    • Add FAQ for questions we get from time to time.
    • Update documentation in README file
    • Remove scrollbars for lt IE9 (#67)
    • Separated Sass Partials. Config, Core and Theme
    • Update body scrolling behavior: Prevent double scroll bar in FF and Co
    • Add support to have a specific element visible when the gallery is opened
    • Add polyfill for CustomEvents
    • Fix modal modifier close button positions
    • Separate close button position from its theme styling
    • Fix close button position
    • Correct handling of aria-hidden with JavaScript
    • Unify close btn on mobile
    • Prevent overflow in mobile modals
    • Add error handling to on method to prevent wrong function calls
    • Improve plainScreen layout
    • Rename tests directory to test
    • Add option to configure mobile-layout breakpoint
    • Add folder plugins for extendable modules
    • Modularize config, core and theme into separate files (#73)
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0alpha(Sep 13, 2013)

    • Update background transparency image (#67)
    • Bugfix: Prevent body jump in Chrome Canary
    • Add better function documentation in JavaScript
    • Rewrite trigger method to use new CustomEvent (#56)
    • Update npm dependencies
    • Add different modal animation styles (#51)
    • Bugfix: UTF-8 problem in Ruby 1.9.3 (#61)
    • Bugfix: open modal on pageload (#46)
    • Register CSSModal as module for AMD (#57)
    • Prevent body from scrolling when scrolling in modal on iOS and Android (#31)
    • Add function to keep focus in modal when tabbing through (#26)
    • Allow multiple, stackable modals (#20)
    • Apply all functions directly on the modal-object
    • Rename function _dispatchEvent to trigger
    • Rename function _addEventListener to on
    • Move set and unset of modal in own function
    • Add convenience functions to add and remove classes on elements
    • Add native style momentum scrolling to content area
    Source code(tar.gz)
    Source code(zip)
Owner
Hans Christian Reinl
TypeScript, JavaScript, React, Podcasting @wearewarhol @workingdraft
Hans Christian Reinl
Avgrund is jQuery plugin with new modal concept for popups

Avgrund Avgrund is a jQuery plugin for your modal boxes and popups. It uses new concept showing depth between popup and page. It works in all modern b

Dmitri Voronianski 1.8k Dec 14, 2022
Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.

Note: Since this plugin was created to solve a lot of the issues with BS2, it still uses the BS2 markup syntax. Currently I believe the default BS3 mo

Jordan Schroter 5k Dec 28, 2022
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.

jBox jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more. Demo: https://stephanwagner.

Stephan Wagner 1.4k Dec 15, 2022
Elegant, responsive, flexible and lightweight modal plugin with jQuery.

iziModal Elegant, responsive, flexible and lightweight modal plugin with jQuery. izimodal.marcelodolza.com Fast Responsive Animated Lightweight Custom

Marcelo Dolza 2.1k Dec 30, 2022
The simplest possible modal for jQuery

A simple & lightweight method of displaying modal windows with jQuery. For quick examples and demos, head to jquerymodal.com. Why another modal plugin

Kyle Fox 2.5k Dec 29, 2022
A simple vanilla and lightweight modal which is easy to expand

A simple vanilla and lightweight modal which is easy to expand

null 1 Jul 3, 2022
Toggle the state of a UI element to easily create components e.g. collapse, accordion, tabs, dropdown, dialog/modal.

Tiny UI Toggle Toggle the state of a UI element to easily create components e.g. collapse, accordion, tabs, dropdown, dialog/modal. Demo and documenta

Nigel O Toole 79 Dec 22, 2022
:zap: Simple and easy to use lightbox script written in pure JavaScript

baguetteBox.js Simple and easy to use lightbox script written in pure JavaScript. Demo page Table of contents Features Installation Importing Usage Cu

Marek Grzybek 2.3k Jan 3, 2023
A beautiful replacement for JavaScript's "alert"

A beautiful replacement for JavaScript's "alert" Installation $ npm install --save sweetalert Usage import swal from 'sweetalert'; swal("Hello world!

Tristan Edwards 22.2k Dec 31, 2022
Lightweight vanilla js modal component (just 2kb) , pure javascript Modal

Lightweight vanilla js modal component (just 2kb) pure javascript Modal , This is just 2kb Lightweight vanilla js modal component with zero dependenci

Salah Eddine Lalami 12 Dec 12, 2022
Accessible, lightweight, stylish modal library in pure JavaScript

accessible-minimodal Accessible, lightweight (< 8 kB), stylish modal library in pure JavaScript Example https://codepen.io/imhvost/pen/LYNazqo (with "

Oleksandr Marchuk 3 Aug 4, 2022
A Simple yet extendable jQuery modal script built for use with inline HTML, images, videos, and galleries.

jQuery Chaos Modal A Simple yet extendable jQuery modal script built for use with inline HTML, forms, and images in mind. There are many other modal p

Matthew Sigley 3 Oct 8, 2020
A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mechanism to manipulate DOM elements

JavaScript Project to Manipulate DOM Elements DFlex A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mech

DFlex 1.5k Jan 8, 2023
Simple to use modal / alert / dialog / popup. Created with vanilla JS. No javascript knowledge required! Works on every browser and device! IE9

EinsModal The last modal / alert / dialog you will ever need! Full Documentation: https://www.einscms.com/modal EinsModal is the best solution to inte

EinsCMS 30 Oct 20, 2022
Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback

Dynamic BS5 Modal Box Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback Insta

null 5 Oct 23, 2022
AngularJS - HTML enhanced for web apps!

AngularJS AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade/Pug and

Angular 59.3k Jan 1, 2023
Cybernetically enhanced web apps

What is Svelte? Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient

Svelte 64.3k Dec 31, 2022
AngularJS - HTML enhanced for web apps!

AngularJS AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade/Pug and

Angular 59.3k Jan 4, 2023
Cybernetically enhanced web apps

What is Svelte? Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient

Svelte 64.3k Dec 28, 2022
A enhanced web storage with env support, expire time control, change callback and LRU storage clear strategy.

enhanced-web-storage A enhanced web storage with env support, expire time control, change callback and LRU storage clear strategy. How to Start import

Ziwen Mei 15 Sep 10, 2021