{"_id":"css-modal","_rev":"12-6f109f56232a990405e122cfa9ceb683","name":"css-modal","description":"Modals, built with pure CSS","dist-tags":{"latest":"1.5.0"},"versions":{"1.1.8":{"name":"css-modal","title":"CSS Modal","description":"Modals, built with pure CSS","version":"1.1.8","homepage":"https://github.com/drublic/css-modal","author":{"name":"Hans Christian Reinl","url":"http://drublic.de"},"repository":{"type":"git","url":"https://github.com/drublic/css-modal"},"bugs":{"url":"https://github.com/drublic/css-modal/issues"},"license":"MIT","scripts":{"test":"grunt travis --verbose"},"engines":{"node":">=0.10"},"dependencies":{},"devDependencies":{"grunt":"0.4.x","grunt-contrib-jshint":"0.10.0","grunt-contrib-watch":"0.6.1","grunt-contrib-sass":"0.7.3","grunt-contrib-copy":"0.5.0","grunt-contrib-connect":"0.7.1","grunt-contrib-jasmine":"0.6.5"},"keywords":["css","modal"],"gitHead":"e51f392174f2e55c56266bd72992034295a9bab6","_id":"css-modal@1.1.8","_shasum":"b911a4d609217eb278fb521805b003482b8895fd","_from":".","_npmVersion":"2.0.0-beta.2","_npmUser":{"name":"drublic","email":"info@drublic.de"},"maintainers":[{"name":"drublic","email":"info@drublic.de"}],"dist":{"shasum":"b911a4d609217eb278fb521805b003482b8895fd","tarball":"https://registry.npmjs.org/css-modal/-/css-modal-1.1.8.tgz","integrity":"sha512-qEqloqN+czHvKchFv46iYegAZt14HwaeC/K53vYceZPO9WP6HBs8r0QpS3cNugS0+WM5zEi5nVQRDLAkDTHHwg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHl5Gexh3tYGXDAEWe0mVqJKtzNAg5oZSpN/xfpcZeorAiBthwWyX78pGwVaXDpC49l5z2Gcpdp8jQBGQe2oKx+amQ=="}]}},"1.2.0":{"name":"css-modal","title":"CSS Modal","description":"Modals, built with pure CSS","version":"1.2.0","homepage":"https://github.com/drublic/css-modal","author":{"name":"Hans Christian Reinl","url":"http://drublic.de"},"repository":{"type":"git","url":"https://github.com/drublic/css-modal"},"bugs":{"url":"https://github.com/drublic/css-modal/issues"},"license":"MIT","scripts":{"test":"grunt travis --verbose"},"engines":{"node":">=0.10"},"dependencies":{},"devDependencies":{"grunt":"0.4.x","grunt-contrib-jshint":"0.10.0","grunt-contrib-watch":"0.6.1","grunt-contrib-sass":"0.7.3","grunt-contrib-copy":"0.5.0","grunt-contrib-connect":"0.7.1","grunt-contrib-jasmine":"0.6.5"},"keywords":["css","modal"],"gitHead":"cdba5fc059032bc84fb1c88e081112259c352337","_id":"css-modal@1.2.0","_shasum":"0ea12068fdbab64c07bebc9b93c94f348e802d9a","_from":".","_npmVersion":"2.0.2","_nodeVersion":"0.10.29","_npmUser":{"name":"drublic","email":"info@drublic.de"},"maintainers":[{"name":"drublic","email":"info@drublic.de"}],"dist":{"shasum":"0ea12068fdbab64c07bebc9b93c94f348e802d9a","tarball":"https://registry.npmjs.org/css-modal/-/css-modal-1.2.0.tgz","integrity":"sha512-bdgems52MGkgzh4oCFpRUIT0guBeZU9imtJ2FxqPsUei+lshLA5ES3jROt7mwNYJdvY+m4nkNzXxG0jrkcoOFw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZU4/VPV70RLR+Ai5On2Hsx0cVPm8+lB5O2wj1YePD3QIgLiPyP/fcZOM//TwZGXIMmPf4gaX+yie10FVGygEl+IA="}]}},"1.3.0":{"name":"css-modal","title":"CSS Modal","description":"Modals, built with pure CSS","version":"1.3.0","homepage":"https://github.com/drublic/css-modal","author":{"name":"Hans Christian Reinl","url":"http://drublic.de"},"main":"./modal.js","style":"./build/*.css","repository":{"type":"git","url":"https://github.com/drublic/css-modal"},"bugs":{"url":"https://github.com/drublic/css-modal/issues"},"license":"MIT","scripts":{"test":"grunt travis --verbose"},"engines":{"node":">=0.10"},"dependencies":{},"devDependencies":{"grunt":"0.4.x","grunt-contrib-jshint":"0.10.0","grunt-contrib-watch":"0.6.1","grunt-contrib-sass":"0.8.1","grunt-contrib-copy":"0.7.0","grunt-contrib-connect":"0.9.0","grunt-contrib-jasmine":"0.8.1"},"keywords":["css","modal"],"gitHead":"2abe5cf8a2345f0a67d8e561b9b7ab8a94917f3e","_id":"css-modal@1.3.0","_shasum":"0baea2585b945ed1aa3a41ae8f6f7ab02b5e0135","_from":".","_npmVersion":"2.5.1","_nodeVersion":"0.10.36","_npmUser":{"name":"drublic","email":"info@drublic.de"},"maintainers":[{"name":"drublic","email":"info@drublic.de"}],"dist":{"shasum":"0baea2585b945ed1aa3a41ae8f6f7ab02b5e0135","tarball":"https://registry.npmjs.org/css-modal/-/css-modal-1.3.0.tgz","integrity":"sha512-MTkJ/9rKs2xZW9P5gPiRpVud2fGAe9cAiCSm5oNRuDI/O2mvqcaY0Mx3ts5a9DDkhQ8Eb5WADb468p+HLBA29w==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBM1VqUJoN3FsxCaZgQ9jjcNEclL5P5tvkCJcVkwZgw6AiEA7uaX9KIjDTtbKfyg9s0oO1dNdK71rm3j4YLV/H/B2+I="}]}},"1.4.0":{"name":"css-modal","title":"CSS Modal","description":"Modals, built with pure CSS","version":"1.4.0","homepage":"https://github.com/drublic/css-modal","author":{"name":"Hans Christian Reinl","url":"http://drublic.de"},"main":"./modal.js","style":"./build/*.css","repository":{"type":"git","url":"git+https://github.com/drublic/css-modal.git"},"bugs":{"url":"https://github.com/drublic/css-modal/issues"},"license":"MIT","scripts":{"test":"grunt travis --verbose"},"engines":{"node":">=0.10"},"dependencies":{},"devDependencies":{"grunt":"0.4.x","grunt-contrib-jshint":"0.11.2","grunt-contrib-watch":"0.6.1","grunt-contrib-sass":"0.9.2","grunt-contrib-copy":"0.8.0","grunt-contrib-connect":"0.10.1","grunt-contrib-jasmine":"0.8.2"},"keywords":["css","modal"],"gitHead":"400e792476c63353f795da6b3491e7d000417aa1","_id":"css-modal@1.4.0","_shasum":"3b9899e2ce16b806bb5b3cdb331b7bcc1a09b81c","_from":".","_npmVersion":"2.8.3","_nodeVersion":"0.10.38","_npmUser":{"name":"drublic","email":"info@drublic.de"},"maintainers":[{"name":"drublic","email":"info@drublic.de"}],"dist":{"shasum":"3b9899e2ce16b806bb5b3cdb331b7bcc1a09b81c","tarball":"https://registry.npmjs.org/css-modal/-/css-modal-1.4.0.tgz","integrity":"sha512-u0+jYwI5kqaMG+Mq1uBmSkOkwv+f+lBcp3fC9z0b6I8nMNuJKJ/S3eOnu8rijDJ5fcwNETAQR6rG05MGJXFECg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPmBgmPEKuUsjF7Hn8nIFeEblyc+cpF/SUyCcuZlGn8AIhAMsk+eG+8dNlpoI8xqJYiDsZlwjIdTf0Rb26bqMIJ9z1"}]}},"1.4.1":{"name":"css-modal","title":"CSS Modal","description":"Modals, built with pure CSS","version":"1.4.1","homepage":"https://github.com/drublic/css-modal","author":{"name":"Hans Christian Reinl","url":"http://drublic.de"},"main":"./modal.js","style":"./build/*.css","repository":{"type":"git","url":"git+https://github.com/drublic/css-modal.git"},"bugs":{"url":"https://github.com/drublic/css-modal/issues"},"license":"MIT","scripts":{"test":"grunt travis --verbose"},"engines":{"node":">=0.10"},"dependencies":{},"devDependencies":{"grunt":"0.4.x","grunt-contrib-jshint":"0.11.2","grunt-contrib-watch":"0.6.1","grunt-contrib-sass":"0.9.2","grunt-contrib-copy":"0.8.0","grunt-contrib-connect":"0.10.1","grunt-contrib-jasmine":"0.8.2"},"keywords":["css","modal"],"gitHead":"44a9307e7e63601a7fa64dc0c5e95df4dd54e126","_id":"css-modal@1.4.1","_shasum":"aed5798763617f16d5951c61c28e9bfe22683ba9","_from":".","_npmVersion":"2.8.3","_nodeVersion":"0.10.38","_npmUser":{"name":"drublic","email":"info@drublic.de"},"maintainers":[{"name":"drublic","email":"info@drublic.de"}],"dist":{"shasum":"aed5798763617f16d5951c61c28e9bfe22683ba9","tarball":"https://registry.npmjs.org/css-modal/-/css-modal-1.4.1.tgz","integrity":"sha512-CQWfaNmu4UqEhPtIlss385WsZKoKh4b7Hv1Lal1V67HYiFNqUTNf9AdK5fmsBWLCzuJ/d+Td+h8s1XgqFgf/vA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE+KY96WbkpcDb4tdoP1dFDf32Tl3uTVUQThDgHbJAD7AiEA9hza4dz+jmLPctsP90LdPheQyQJeEWKxPy8v/lNZNpM="}]}},"1.5.0":{"name":"css-modal","title":"CSS Modal","description":"Modals, built with pure CSS","version":"1.5.0","homepage":"https://github.com/drublic/css-modal","author":{"name":"Hans Christian Reinl","url":"http://drublic.de"},"main":"./modal.js","style":"./build/*.css","repository":{"type":"git","url":"git+https://github.com/drublic/css-modal.git"},"bugs":{"url":"https://github.com/drublic/css-modal/issues"},"license":"MIT","scripts":{"test":"grunt travis --verbose"},"engines":{"node":">=0.10"},"dependencies":{},"devDependencies":{"grunt":"0.4.x","grunt-contrib-jshint":"0.11.3","grunt-contrib-watch":"0.6.1","grunt-contrib-sass":"0.9.2","grunt-contrib-copy":"0.8.1","grunt-contrib-connect":"0.11.2","grunt-contrib-jasmine":"0.9.2"},"keywords":["css","modal"],"gitHead":"20ffd8cb063f1a38b561bd9fbb08ec78614fc5ef","_id":"css-modal@1.5.0","_shasum":"4f680c3a6eb1e690b7f0cf2e977d49b7ea4b5d96","_from":".","_npmVersion":"3.7.3","_nodeVersion":"5.9.0","_npmUser":{"name":"drublic","email":"info@drublic.de"},"maintainers":[{"name":"drublic","email":"info@drublic.de"}],"dist":{"shasum":"4f680c3a6eb1e690b7f0cf2e977d49b7ea4b5d96","tarball":"https://registry.npmjs.org/css-modal/-/css-modal-1.5.0.tgz","integrity":"sha512-dh3IMxjAUqPq8LQ+4kw4mhgq0sl1QrESOsGOq9rAe8Kd1uFNAoCxkpXJHWMwP08XCdIAD+dPYmrdwdJNOljkDA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHW7o1gyayI679cmhXIP/M3c71gj+/X31d7TNdBubfKhAiEAtDmjr3whTKtA1ZSo/+R/WtVRFXAzMJaDOBV6l5Z4FX4="}]},"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/css-modal-1.5.0.tgz_1463042407589_0.972182302037254"}}},"readme":"# CSS Modals [![Build Status](https://secure.travis-ci.org/drublic/css-modal.png?branch=master)](http://travis-ci.org/drublic/css-modal)\n\nModals built out of pure CSS\n\nPlease [visit the website](http://drublic.github.io/css-modal) to read more\nabout this project and refer to the [FAQ](FAQ.md) in case of a question.\n\n## [Gratipay me](https://gratipay.com/drublic)\n(aka. Gittip) if you enjoy this plugin.\n\n## What is it\n\n**Built with pure CSS:** CSS Modal is built out of pure CSS. JavaScript is only\nfor sugar. This makes them perfectly accessible.\n\n**Optimized for mobile:** The modals are designed using responsive web design\nmethods. They work on all screen sizes from a small mobile phone up to high\nresolution screens.\n\n**Use as Sass plugin:** You can use CSS Modal as [Sass](http://sass-lang.com/)\nplugin and apply it to your custom classes. No need to understand all the code.\n\n**A few other advantages:** Accessible, cross-browser, media-adaptive, small and\nfast!\n\n\n## How to use\n\nPlease be aware that modals get stacked above each other if you open one modal\nfrom within another. You can add a data-attribute `data-stackable=\"false\"` to\nthe modal in order to make it non-stackable.\n\n### Markup\n\nYou need to include the markup and content for modals in your website. This has\na positive effect on SEO. The example code:\n\n```html\n<section class=\"modal--show\" id=\"modal-text\" tabindex=\"-1\"\n        role=\"dialog\" aria-labelledby=\"modal-label\" aria-hidden=\"true\">\n\n    <div class=\"modal-inner\">\n        <header id=\"modal-label\"><!-- Header --></header>\n        <div class=\"modal-content\"><!-- The modals content --></div>\n        <footer><!-- Footer --></footer>\n    </div>\n\n    <a href=\"#!\" class=\"modal-close\" title=\"Close this modal\" data-close=\"Close\"\n        data-dismiss=\"modal\">?</a>\n</section>\n```\n\nThe `id` attribute is the one which identifies the modal. You can link to this\nID from everywhere.\n\n> Please note that the ID cannot include the `/` character since this one is\nneeded for identifying stacked modals.\n\nUsing header and footer is optional. Just remove the tags if you don't want them\nin a modal.\n\nYou should leave the link's href attribute that way to close the modal in order\nto prevent the page from scrolling to top when clicking on it.\n\nPlease remember to set a unique ID for the header and change the\n`aria-labelledby` attribute to the same value.\n\nYou link to a modal by simply setting the ID to a link element's `href` like this:\n\n```html\n<a href=\"#modal\">Modal</a>\n```\n\nIf you want to decouple the modal call from the location's hash you need to add\n`data-cssmodal-nohash` to the link.\n\n### Sass\n\nIf you use Sass you can use the file [modal.scss](modal.scss) and include it\ninto your project. Here is an example:\n\n```scss\n@import \"modules/modal\";\n```\n\nCSS Modals uses Sass's placeholders. You can use them by calling them via\n@extend in your modal's class name. The snippet looks something like that:\n\n```scss\n.my-awesome-class-name {\n    @extend %modal;\n}\n```\n\n### JavaScript\n\nAs stated above you don't need JavaScript to get a good experience out of CSS\nModals. But there are some issues where JavaScript helps:\n\n* IE 8 compatibility (please include jQuery if you need full compatibility).\n* Pressing escape: If you press <kbd>ESC</kbd> on your keyboard while the modal is visible\nit closes itself. This behavior cannot be achieved with CSS only.\n* Preventing background page from scrolling: If you scroll within the modal and\nyou reach the end you don't want the page in the background to scroll. To\nprevent this JavaScript pushes a CSS class selector to the body element.\n* Being accessible: To get the browser's focus to the modal and back after\nclosing.\n* Firing events: When a modal opens a custom event is fired called\n`cssmodal:show`. When the modal is hidden, an event called `cssmodal:hide` is\ntriggered.\n* To add this behavior to your website, please include the JavaScript file\nmodal.js right before the closing body-tag:\n\n```html\n<script src=\"js/modal.js\"></script>\n```\n\n\n## Browser Support\n\nThis modal is designed to work on all modern browsers. Unfortunately this does\nnot include Internet Explorer 7 or lower. But we deal with IE 8 – well,… at\nleast it works.\n\nOn mobile Safari for iOS and Android 4+ it is tested pretty well, while Android\n2.3 has some problems (biggest issue\n[is scrolling](https://github.com/drublic/css-modal/issues/4)).\nIt's also working on Windows Phone 8.\n\nIn numbers:\n\n* Chrome\n* Firefox\n* Safari 6.x\n* Opera 12+\n* Internet Explorer 8 (functional, include jQuery if you want support for\n  events)\n* Internet Explorer 9+\n* iOS 6\n* Android 2.3 (functional)\n* Android 4.x\n* Windows Phone 8\n\n## Media\n\nPlease be aware that you need to stop playing videos or audio manually after\nhiding the modal. We have [a plugin](plugins/html5video.js) for this though.\n\n## Events\n\nThere is an event `cssmodal:show` fired on the modal itself after the modal is\nshown. Another event `cssmodal:hide` is fired after the modal is hidden.\n\nYou can use the events by subscribing to them as if they were click events or\nsomething. Here is an example using jQuery:\n\n```js\n$(document).on('cssmodal:show', function (event) {\n    console.log(event);\n});\n```\n\nThere events are not fired in IE8. Please be aware of that and use jQuery or\nsomething else to create custom events.\n\n\n## Plugins\n\nWe have a couple for the modal to enhance it:\n\n* Resize - Resizes modal to size of input elements\n* Gallery - A lightbox plugin (in connection with resize)\n* HTML5 Video - Load videos within the modal\n* Maximum Width - Set a custom maximum width on a per-modal basis\n\n\n## Bug reports and feature requests\n\nIf you got something that's worth including into the project please\n[open an issue](https://github.com/drublic/css-modal/issues) for further\ndiscussion.\n\nPlease see the [section on contributing](http://drublic.github.io/css-modal/#contributing)\non the website.\n\n\n## Contributors\n\nThis is a project by [Hans Christian Reinl](http://drublic.de). Thanks goes out\nto [all other contributors](https://github.com/drublic/css-modal/contributors).\n","maintainers":[{"name":"drublic","email":"info@drublic.de"}],"time":{"modified":"2022-06-14T04:43:03.572Z","created":"2014-09-16T14:58:25.588Z","1.1.8":"2014-09-16T14:58:25.588Z","1.2.0":"2014-12-01T08:02:25.467Z","1.3.0":"2015-03-06T22:26:20.603Z","1.4.0":"2015-07-08T14:08:06.573Z","1.4.1":"2015-07-17T09:31:51.268Z","1.5.0":"2016-05-12T08:40:10.799Z"},"homepage":"https://github.com/drublic/css-modal","keywords":["css","modal"],"repository":{"type":"git","url":"git+https://github.com/drublic/css-modal.git"},"author":{"name":"Hans Christian Reinl","url":"http://drublic.de"},"bugs":{"url":"https://github.com/drublic/css-modal/issues"},"license":"MIT","readmeFilename":"README.md","users":{"filipve":true}}