{"id":33091208,"url":"https://github.com/VodkaBears/Remodal","last_synced_at":"2025-11-16T14:00:44.376Z","repository":{"id":57353148,"uuid":"16822294","full_name":"vodkabears/Remodal","owner":"vodkabears","description":"No longer actively maintained.","archived":false,"fork":false,"pushed_at":"2019-04-01T14:09:24.000Z","size":643,"stargazers_count":2738,"open_issues_count":64,"forks_count":751,"subscribers_count":89,"default_branch":"master","last_synced_at":"2025-11-11T07:02:26.346Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://vodkabears.github.io/remodal/","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/vodkabears.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-02-14T00:33:55.000Z","updated_at":"2025-11-01T00:14:01.000Z","dependencies_parsed_at":"2022-09-11T06:50:59.224Z","dependency_job_id":null,"html_url":"https://github.com/vodkabears/Remodal","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"purl":"pkg:github/vodkabears/Remodal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vodkabears%2FRemodal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vodkabears%2FRemodal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vodkabears%2FRemodal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vodkabears%2FRemodal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vodkabears","download_url":"https://codeload.github.com/vodkabears/Remodal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vodkabears%2FRemodal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284502438,"owners_count":27016443,"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","status":"online","status_checked_at":"2025-11-15T02:00:06.050Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-11-14T18:00:23.172Z","updated_at":"2025-11-16T14:00:44.370Z","avatar_url":"https://github.com/vodkabears.png","language":"JavaScript","funding_links":[],"categories":["19. 通知组件/弹框组件/模态窗口 ##","19. 通知组件/弹框组件/模态窗口","JavaScript"],"sub_categories":["13.20 视差滚动(Parallax Scrolling) ###","13.20 视差滚动(Parallax Scrolling)","jQuery plugins"],"readme":"[![NPM version](https://img.shields.io/npm/v/remodal.svg?style=flat)](https://npmjs.org/package/remodal)\n[![Bower version](https://badge.fury.io/bo/remodal.svg)](http://badge.fury.io/bo/remodal)\n[![Travis](https://travis-ci.org/VodkaBears/Remodal.svg?branch=master)](https://travis-ci.org/VodkaBears/Remodal)\nRemodal\n=======\n\n**No longer actively maintained. I am not interested to maintain jQuery plugins anymore. If you have some fixes, feel free to make PR.**\n\nResponsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.\n\n![logo](https://raw.githubusercontent.com/VodkaBears/vodkabears.github.com/master/remodal/remodal.png)\n\n## Notes\n* All modern browsers are supported.\n* IE8+. To enable IE8 styles add the `lt-ie9` class to the `html` element, as modernizr does.\n* jQuery, jQuery2, Zepto support.\n* Browserify support.\n\n## Start\n\nDownload the latest version from [GitHub](https://github.com/VodkaBears/Remodal/releases/latest\n) or via package managers:\n```\nnpm install remodal\nbower install remodal\n```\n\nInclude the CSS files from the dist folder in the head section:\n```html\n\u003clink rel=\"stylesheet\" href=\"../dist/remodal.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"../dist/remodal-default-theme.css\"\u003e\n```\n\nInclude the JS file from the dist folder before the `\u003c/body\u003e`:\n```html\n\u003cscript src=\"../dist/remodal.min.js\"\u003e\u003c/script\u003e\n```\n\nYou can define the background container for the modal(for effects like a blur). It can be any simple content wrapper:\n```html\n\u003cdiv class=\"remodal-bg\"\u003e\n...Page content...\n\u003c/div\u003e\n```\n\nAnd now create the modal dialog:\n```html\n\u003cdiv class=\"remodal\" data-remodal-id=\"modal\"\u003e\n  \u003cbutton data-remodal-action=\"close\" class=\"remodal-close\"\u003e\u003c/button\u003e\n  \u003ch1\u003eRemodal\u003c/h1\u003e\n  \u003cp\u003e\n    Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.\n  \u003c/p\u003e\n  \u003cbr\u003e\n  \u003cbutton data-remodal-action=\"cancel\" class=\"remodal-cancel\"\u003eCancel\u003c/button\u003e\n  \u003cbutton data-remodal-action=\"confirm\" class=\"remodal-confirm\"\u003eOK\u003c/button\u003e\n\u003c/div\u003e\n```\n\nDon't use the `id` attribute, if you want to avoid the anchor jump, use `data-remodal-id`.\n\nSo, now you can call it with the hash:\n```html\n\u003ca href=\"#modal\"\u003eCall the modal with data-remodal-id=\"modal\"\u003c/a\u003e\n```\nOr:\n```html\n\u003ca data-remodal-target=\"modal\"\u003eCall the modal with data-remodal-id=\"modal\"\u003c/a\u003e\n```\n\n## Options\n\nYou can pass additional options with the `data-remodal-options` attribute.\n```html\n\u003cdiv class=\"remodal\" data-remodal-id=\"modal\"\n  data-remodal-options=\"hashTracking: false, closeOnOutsideClick: false\"\u003e\n\n  \u003cbutton data-remodal-action=\"close\" class=\"remodal-close\"\u003e\u003c/button\u003e\n  \u003ch1\u003eRemodal\u003c/h1\u003e\n  \u003cp\u003e\n    Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.\n  \u003c/p\u003e\n  \u003cbr\u003e\n  \u003cbutton data-remodal-action=\"cancel\" class=\"remodal-cancel\"\u003eCancel\u003c/button\u003e\n  \u003cbutton data-remodal-action=\"confirm\" class=\"remodal-confirm\"\u003eOK\u003c/button\u003e\n\u003c/div\u003e\n```\n\n#### hashTracking\n`Default: true`\n\nTo open the modal without the hash, use the `data-remodal-target` attribute.\n```html\n\u003ca data-remodal-target=\"modal\" href=\"#\"\u003eCall the modal with data-remodal-id=\"modal\"\u003c/a\u003e\n```\n\n#### closeOnConfirm\n`Default: true`\n\nIf true, closes the modal window after clicking the confirm button.\n\n#### closeOnCancel\n`Default: true`\n\nIf true, closes the modal window after clicking the cancel button.\n\n#### closeOnEscape\n`Default: true`\n\nIf true, closes the modal window after pressing the ESC key.\n\n#### closeOnOutsideClick\n`Default: true`\n\nIf true, closes the modal window by clicking anywhere on the page.\n\n#### modifier\n`Default: ''`\n\nModifier CSS classes for the modal that is added to the overlay, modal, background and wrapper (see [CSS](#css)).\n\n#### appendTo\n`Default: document.body`\n\n## Globals\n\n```html\n\u003cscript\u003e\nwindow.REMODAL_GLOBALS = {\n  NAMESPACE: 'modal',\n  DEFAULTS: {\n    hashTracking: false\n  }\n};\n\u003c/script\u003e\n\u003cscript src=\"../dist/remodal.js\"\u003e\u003c/script\u003e\n```\n\n#### NAMESPACE\n\nBase HTML class for your modals. CSS theme should be updated to reflect this.\n\n#### DEFAULTS\n\nExtends the default settings.\n\n## Initialization with JavaScript\n\nDo not set the 'remodal' class, if you prefer a JS initialization.\n```html\n\u003cdiv data-remodal-id=\"modal\"\u003e\n  \u003cbutton data-remodal-action=\"close\" class=\"remodal-close\"\u003e\u003c/button\u003e\n  \u003ch1\u003eRemodal\u003c/h1\u003e\n  \u003cp\u003e\n    Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.\n  \u003c/p\u003e\n\u003c/div\u003e\n\u003cscript\u003e\n    var options = {...};\n\n    $('[data-remodal-id=modal]').remodal(options);\n\u003c/script\u003e\n```\n\n## Methods\n\nGet the instance of the modal and call a method:\n```js\nvar inst = $('[data-remodal-id=modal]').remodal();\n\n/**\n * Opens the modal window\n */\ninst.open();\n\n/**\n * Closes the modal window\n */\ninst.close();\n\n/**\n * Returns a current state of the modal\n * @returns {'closed'|'closing'|'opened'|'opening'}\n */\ninst.getState();\n\n/**\n * Destroys the modal window\n */\ninst.destroy();\n```\n\n## Events\n\n```js\n$(document).on('opening', '.remodal', function () {\n  console.log('Modal is opening');\n});\n\n$(document).on('opened', '.remodal', function () {\n  console.log('Modal is opened');\n});\n\n$(document).on('closing', '.remodal', function (e) {\n\n  // Reason: 'confirmation', 'cancellation'\n  console.log('Modal is closing' + (e.reason ? ', reason: ' + e.reason : ''));\n});\n\n$(document).on('closed', '.remodal', function (e) {\n\n  // Reason: 'confirmation', 'cancellation'\n  console.log('Modal is closed' + (e.reason ? ', reason: ' + e.reason : ''));\n});\n\n$(document).on('confirmation', '.remodal', function () {\n  console.log('Confirmation button is clicked');\n});\n\n$(document).on('cancellation', '.remodal', function () {\n  console.log('Cancel button is clicked');\n});\n```\n\n## CSS\n\n#### Classes\n\n`.remodal` – the default class of modal dialogs.\n\n`.remodal-wrapper` – the additional wrapper for the `.remodal`, it is not the overlay and used for the alignment.\n\n`.remodal-overlay` – the overlay of modal dialogs, it is under the wrapper.\n\n`.remodal-bg` – the background of modal dialogs, it is under the overlay and usually it is the wrapper of your content. You should add it on your own.\n\nThe `remodal` prefix can be changed in the global settings. See [the `NAMESPACE` option](#namespace).\n\n#### States\n\nStates are added to the `.remodal`, `.remodal-overlay`, `.remodal-bg`, `.remodal-wrapper` classes.\n\nList:\n```\n.remodal-is-opening\n.remodal-is-opened\n.remodal-is-closing\n.remodal-is-closed\n```\n\n#### Modifier\n\nA modifier that is specified in the [options](#options) is added to the `.remodal`, `.remodal-overlay`, `.remodal-bg`, `.remodal-wrapper` classes.\n\n## Using with other javascript libraries\n\nRemodal has wrappers that make it easy to use with other javascript libraries:\n\n### Ember\n\n* [ember-remodal](https://github.com/sethbrasile/ember-remodal)\n\n## License\n\n```\nThe MIT License (MIT)\n\nCopyright (c) 2015 Ilya Makarov\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVodkaBears%2FRemodal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FVodkaBears%2FRemodal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVodkaBears%2FRemodal/lists"}