{"id":15018074,"url":"https://github.com/chrishumboldt/rocket-modal","last_synced_at":"2025-10-23T15:30:24.316Z","repository":{"id":58223680,"uuid":"21355408","full_name":"chrishumboldt/Rocket-Modal","owner":"chrishumboldt","description":"A Javascript modal component.","archived":true,"fork":false,"pushed_at":"2024-05-27T05:12:21.000Z","size":342,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-16T09:19:32.833Z","etag":null,"topics":["javascript","modal","rocket"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrishumboldt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-06-30T15:09:16.000Z","updated_at":"2024-05-27T05:12:34.000Z","dependencies_parsed_at":"2024-11-14T17:04:36.168Z","dependency_job_id":"3a637b8a-5f13-498a-9182-024927d37dba","html_url":"https://github.com/chrishumboldt/Rocket-Modal","commit_stats":{"total_commits":102,"total_committers":3,"mean_commits":34.0,"dds":0.07843137254901966,"last_synced_commit":"0d9358cf82cf0c92bdd27d380b302bf8d83e19ae"},"previous_names":["chrishumboldt/modalplate"],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrishumboldt%2FRocket-Modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrishumboldt%2FRocket-Modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrishumboldt%2FRocket-Modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrishumboldt%2FRocket-Modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrishumboldt","download_url":"https://codeload.github.com/chrishumboldt/Rocket-Modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237843761,"owners_count":19375198,"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","modal","rocket"],"created_at":"2024-09-24T19:51:24.238Z","updated_at":"2025-10-23T15:30:18.857Z","avatar_url":"https://github.com/chrishumboldt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**NO LONGER SUPPORTED**\n\n# Rocket Modal\nA Javascript modal module.\n\n* [Getting Started](#getting-started)\n* [Basic Example](#basic-example)\n   * [Manual Initialisation](#manual-initialisation)\n* [Javascript Options](#javascript-options)\n   * [Defaults](#defaults)\n* [Modal Target](#modal-target)\n* [On Done](#on-done)\n* [Modal Methods](#modal-methods)\n* [Advanced Example](#advanced-example)\n* [Modalplate Deprecated](#modalplate-deprecated)\n\n## Getting Started\nInstall via NPM.\n\n```\nnpm install rocket-modal\n```\n\n**NOTE** that this module has a dependency [Rocket Tools (21kb)](https://github.com/chrishumboldt/Rocket-Tools) which will automatically be installed as well.\n\nStart by including the necessary files.\n\n```html\n\u003chead\u003e\n   \u003clink href=\"node_modules/rocket-modal/css/modal.min.css\" rel=\"stylesheet\" type=\"text/css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n   \u003cscript src=\"node_modules/rocket-tools/js/tools.min.js\"\u003e\u003c/script\u003e\n   \u003cscript src=\"node_modules/rocket-modal/js/modal.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\n## Basic Example\nSee a basic example of how to use the module.\n\n```html\n\u003ca id=\"modal-link-1\" href\u003eOpen New Modal\u003c/a\u003e\n\n\u003cscript\u003e\nRocket.modal({\n   trigger: '#modal-link-1',\n   heading: 'Example Modal',\n   body: 'Here is the body text.'\n});\n\u003c/script\u003e\n```\n\n#### Manual Initialisation\nIt is also possible to manually trigger a modal if you so choose. This is not recommended for [targeted modals](#modal-target) as you will be initialising each time which is redundant. In this case you probably want to parse the `event` to prevent odd click behaviors. For example:\n\n```html\n\u003ca id=\"modal-link-1\" href\u003eOpen New Modal\u003c/a\u003e\n\n\u003cscript\u003e\ndocument.getElementById('modal-link-1').addEventListener('click', event =\u003e {\n   Rocket.modal({\n      heading: 'Example Modal',\n      body: 'Here is the body text.',\n      parseEvent: event\n   });\n});\n\u003c/script\u003e\n```\n\n## Javascript Options\nSee the different options you have available on module call.\n\nName | Default | Options | Description\n---- | ---- | ---- | ----\n`body` | | | You can make the body whatever you would like to display.\n`breakpoint` | `700` | | Set the breakpoint of the modal (in pixels) to change from a fullscreen modal to a standard content modal.\n`buttons` | `true` | `true` `false` | Display the modal buttons.\u003cbr\u003e**NOTE** that the true button will only display if the `onTrue` argument is set.\n`buttonFalse` | `Cancel` | | Set the false button text.\n`buttonTrue` | `Ok` | | Set the true button text.\n`classAdd` | | | Set a class to the containing modal.\n`closeText` | `close` | | Set the text or inner HTML of the close link.\n`heading` | | | You can make the heading whatever you would like.\n`onDone` | | | Set a function that will execute once the modal is either created or the link is triggered.\n`onTrue` | | | Set a function that will execute when the true button is clicked.\n`parseEvent` | | | Parse the event of a click to prevent the default link behavior. Only required for manual initialisations.\n`reveal` | `slidefromtop` | `appear` `appearscale`\u003cbr\u003e`slidefrombottom`\u003cbr\u003e`slidefromleft`\u003cbr\u003e`slidefromright`\u003cbr\u003e`slidefromtop` | Set the reveal animation.\n`revealLarge` | | `appear` `appearscale`\u003cbr\u003e`slidefrombottom`\u003cbr\u003e`slidefromleft`\u003cbr\u003e`slidefromright`\u003cbr\u003e`slidefromtop` | Set the reveal animation after the breakpoint has been reached.\u003cbr\u003e**NOTE** that false means the already existing reveal animation will be used.\n`target` | `false` | | Instead of creating a new modal, you can open an existing modal with a particular selector.\n`trigger` | | | Set the elements that will trigger the modal event.\n\n#### Defaults\nYou can also set or overwrite the above options globally by altering the Rocket defaults. To do so reference the defaults object property. For example:\n\n```js\nRocket.defaults.modal.reveal = 'appearscale';\nRocket.defaults.modal.close = 'Exit';\nRocket.defaults.modal.buttonTrue = 'Yup';\n```\n\n## Modal Target\nIf you want to open a modal that has existing HTML, then target that modal. **Note** that a predefined HTML structure is required.\n\n```html\n\u003ca id=\"modal-link-2\" href\u003eOpen Target Modal\u003c/a\u003e\n\n\u003cdiv id=\"modal-2\" class=\"rocket-modal\"\u003e\n   \u003cdiv class=\"rmo-heading\"\u003e\n      \u003ch6\u003eThe Linked Modal Heading\u003c/h6\u003e\n   \u003c/div\u003e\n   \u003cdiv class=\"rmo-body\"\u003e\n      This is the modal body.\n   \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\nRocket.modal({\n   trigger: 'modal-link-2',\n   target: '#modal-2'\n});\n\u003c/script\u003e\n```\n\n## On Done\nYou can declare a function that will trigger once the modal is created or once the linked modal is set to reveal. See an example below.\n\n```js\nRocket.modal({\n   trigger: '#modal-link',\n   heading: 'Text Heading',\n   body: 'This is a simple test'\n   onDone: () =\u003e {\n      console.log('All done! Here is the modal element:');\n   }\n});\n```\n\n## Modal Methods\nOnce you have initialised a modal instance, there are some methods and references that you have access to. See below:\n\n```js\n// This modal is immediately shown as it has no trigger.\nvar myModal = Rocket.modal({\n   heading: 'Text Heading',\n   body: 'This is a simple test'\n});\n\n// Manually close the modal\nsetTimeout(() =\u003e {\n   myModal.close();\n}, 1000);\n\n// Manually show the modal again\nsetTimeout(() =\u003e {\n   myModal.show();\n}, 2000);\n```\n\n## Advanced Example\nSee an advanced example below with options as per the above.\n\n```html\n\u003ca id=\"example\" href\u003eOpen Modal\u003c/a\u003e\n\n\u003cscript\u003e\nlet myModal = Rocket.modal({\n   trigger: '#example',\n   heading: 'Advanced Modal',\n   body: 'Here is the body text.',\n   buttons: true,\n   close: '\u003ci class=\"icon-close\"\u003e\u003c/i\u003e',\n   breakpoint: 320,\n   reveal: 'slidefromright',\n   revealLarge: 'slidefromtop',\n   onDone: () =\u003e {\n      console.log('Modal Loaded!');\n   },\n   onTrue: () =\u003e {\n      console.log('The true button was clicked!');\n      myModal.close();\n\n   }\n});\n\u003c/script\u003e\n```\n\n## Modalplate Deprecated\nThe original library, Modalplate, has been deprecated. The entire Webplate project is being refactored and rebranded with a new development philosophy. Modalplate will be maintained only with bug fixes under the **modalplate** branch.\n\n## Author\nCreated and maintained by Chris Humboldt\u003cbr\u003e\nWebsite: \u003ca href=\"http://chrishumboldt.com/\"\u003echrishumboldt.com\u003c/a\u003e\u003cbr\u003e\nGitHub \u003ca href=\"https://github.com/chrishumboldt\"\u003egithub.com/chrishumboldt\u003c/a\u003e\u003cbr\u003e\n\n## Copyright and License\nCopyright 2017 Rocket Project\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrishumboldt%2Frocket-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrishumboldt%2Frocket-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrishumboldt%2Frocket-modal/lists"}