{"id":16427575,"url":"https://github.com/cferdinandi/modals","last_synced_at":"2025-03-16T17:34:43.040Z","repository":{"id":7659155,"uuid":"9020521","full_name":"cferdinandi/modals","owner":"cferdinandi","description":"Simple modal dialogue windows","archived":false,"fork":false,"pushed_at":"2019-07-16T12:27:40.000Z","size":233,"stargazers_count":86,"open_issues_count":7,"forks_count":13,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-10-22T08:52:57.869Z","etag":null,"topics":["javascript","javascript-plugin","modal-dialogue-windows","modals","no-dependencies","vanilla-js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cferdinandi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-03-26T01:51:12.000Z","updated_at":"2024-01-11T23:29:19.000Z","dependencies_parsed_at":"2022-09-08T02:44:36.547Z","dependency_job_id":null,"html_url":"https://github.com/cferdinandi/modals","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fmodals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fmodals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fmodals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fmodals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cferdinandi","download_url":"https://codeload.github.com/cferdinandi/modals/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221666411,"owners_count":16860415,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","javascript-plugin","modal-dialogue-windows","modals","no-dependencies","vanilla-js"],"created_at":"2024-10-11T08:13:23.975Z","updated_at":"2024-10-27T10:59:27.244Z","avatar_url":"https://github.com/cferdinandi.png","language":"JavaScript","readme":"# Modals [![Build Status](https://travis-ci.org/cferdinandi/modals.svg)](https://travis-ci.org/cferdinandi/modals)\nSimple modal dialogue windows.\n\n[Download Modals](https://github.com/cferdinandi/modals/archive/master.zip) / [View the demo](http://cferdinandi.github.io/modals/)\n\n\n\u003chr\u003e\n\n### Want to learn how to write your own vanilla JS plugins? Check out [\"The Vanilla JS Guidebook\"](https://gomakethings.com/vanilla-js-guidebook/) and level-up as a web developer. 🚀\n\n\u003chr\u003e\n\n\n\n## Getting Started\n\nCompiled and production-ready code can be found in the `dist` directory. The `src` directory contains development code.\n\n### 1. Include Modals on your site.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/css/modals.css\"\u003e\n\u003cscript src=\"dist/js/modals.js\"\u003e\u003c/script\u003e\n```\n\n### 2. Add the markup to your HTML.\n\nAdd the `[data-modal]` attribute to your modal toggle. Add the `.modal` class and the `[data-modal-window]` to your modal window. Be sure to assign each modal a unique ID.\n\n```html\n\u003ca data-modal=\"#modal\" href=\"#\"\u003eModal Toggle\u003c/a\u003e\n\n\u003cdiv class=\"modal\" data-modal-window id=\"modal\"\u003e\n\t\u003ca class=\"close\" data-modal-close href=\"#\"\u003ex\u003c/a\u003e\n\t\u003ch3\u003eModal\u003c/h3\u003e\n\t\u003cp\u003eModal content\u003c/p\u003e\n\t\u003cbutton data-modal-close\u003eClose\u003c/button\u003e\n\u003c/div\u003e\n```\n\nAdd the `.modal-medium` or `.modal-small` class to change the modal size.\n\n```html\n\u003cdiv class=\"modal modal-small\" data-modal-window id=\"modal\"\u003e\n\t...\n\u003c/div\u003e\n```\n\nAdding a `[data-modal-close]` data attribute to any button or link turns it into a modal dismiss link. The `.modal-close` class adds special styling to close links (if you wanted to use an X for close, for example). Clicking anywhere outside the modal or pressing the escape key will close the modal, too.\n\n### 3. Assign a backup URL.\n\nAlways specify a functioning link as a backup for modals.\n\nModals uses modern JavaScript API's that aren't supported by older browsers, including IE 10 and lower. On modern browsers, Modals will prevent the backup URL from redirecting people away from the current page.\n\n```html\n\u003ca data-modal=\"#modal\" href=\"http://backup-url.com\"\u003eModal Toggle\u003c/a\u003e\n```\n\n*If you need to support older browsers, you can still [download the jQuery version of modals on GitHub](https://github.com/cferdinandi/modals/tree/archive-v1).*\n\n### 4. Initialize Modals.\n\nIn the footer of your page, after the content, initialize Modals. And that's it, you're done. Nice work!\n\n```html\n\u003cscript\u003e\n\tmodals.init();\n\u003c/script\u003e\n```\n\n\n\n## Installing with Package Managers\n\nYou can install Modals with your favorite package manager.\n\n* **NPM:** `npm install cferdinandi/modals`\n* **Bower:** `bower install https://github.com/cferdinandi/modals.git`\n* **Component:** `component install install cferdinandi/modals`\n\n\n\n## Working with the Source Files\n\nIf you would prefer, you can work with the development code in the `src` directory using the included [Gulp build system](http://gulpjs.com/). This compiles, lints, and minifies code.\n\n### Dependencies\nMake sure these are installed first.\n\n* [Node.js](http://nodejs.org)\n* [Gulp](http://gulpjs.com) `sudo npm install -g gulp`\n\n### Quick Start\n\n1. In bash/terminal/command line, `cd` into your project directory.\n2. Run `npm install` to install required files.\n3. When it's done installing, run one of the task runners to get going:\n\t* `gulp` manually compiles files.\n\t* `gulp watch` automatically compiles files and applies changes using [LiveReload](http://livereload.com/).\n\n\n\n## Options and Settings\n\nModals includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings.\n\n### Global Settings\n\nYou can pass options and callbacks into Modals through the `init()` function:\n\n```javascript\nmodals.init({\n\tselectorToggle: '[data-modal]', // Modal toggle selector\n\tselectorWindow: '[data-modal-window]', // Modal window selector\n\tselectorClose: '[data-modal-close]', // Modal window close selector\n\tmodalActiveClass: 'active', // Class applied to active modal windows\n\tmodalBGClass: 'modal-bg', // Class applied to the modal background overlay\n\tpreventBGScroll: false, // Boolean, prevents background content from scroll if true\n\tpreventBGScrollHtml: true, // Boolean, adds overflow-y: hidden to \u003chtml\u003e if true (preventBGScroll must also be true)\n\tpreventBGScrollBody: true, // Boolean, adds overflow-y: hidden to \u003cbody\u003e if true (preventBGScroll must also be true)\n\tbackspaceClose: true, // Boolean, whether or not to enable backspace/delete button modal closing\n\tstopVideo: true, // Boolean, if true, stop videos when tab closes\n\tcallbackOpen: function ( toggle, modal ) {}, // Functions to run after opening a modal\n\tcallbackClose: function ( toggle, modal ) {} // Functions to run after closing a modal\n});\n```\n\n***Note:*** *If you change the `selectorToggle`, you still need to include the `[data-modal]` attribute in order to pass in the selector for the navigation menu.*\n\n*If your modal includes any form fields, you should set `backspaceClose` to `false` or users will not be able to delete their text.*\n\n### Use Modals events in your own scripts\n\nYou can also call Modals events in your own scripts.\n\n#### openModal()\nOpen a specific modal window.\n\n```javascript\nmodals.openModal(\n\ttoggle, // Node that launches the modal. ex. document.querySelector('#toggle')\n\tmodalID, // The ID of the modal to launch. ex '#modal'\n\toptions, // Classes and callbacks. Same options as those passed into the init() function.\n\tevent // Optional, if a DOM event was triggered.\n);\n```\n\n**Example**\n\n```javascript\nmodals.openModal( null, '#modal' );\n```\n\n#### closeModal()\nClose the open modal window.\n\n```javascript\nmodals.closeModal(\n\toptions // Classes and callbacks. Same options as those passed into the init() function.\n);\n```\n\n**Example**\n\n```javascript\nmodals.closeModal();\n```\n\n#### destroy()\nDestroy the current `modals.init()`. This is called automatically during the init function to remove any existing initializations.\n\n```javascript\nmodals.destroy();\n```\n\n\n\n## Brower Compatibility\n\nModals works in all modern browsers, and IE 10 and above. You can extend browser support back to IE 9 with the [classList.js polyfill](https://github.com/eligrey/classList.js/).\n\nModals is built with modern JavaScript APIs, and uses progressive enhancement. If the JavaScript file fails to load, or if your site is viewed on older and less capable browsers, all content will be displayed by default.\n\n\n\n## How to Contribute\n\nPlease review the [contributing guidelines](CONTRIBUTING.md).\n\n\n\n## License\n\nThe code is available under the [MIT License](LICENSE.md).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcferdinandi%2Fmodals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcferdinandi%2Fmodals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcferdinandi%2Fmodals/lists"}