{"id":18310348,"url":"https://github.com/torann/jquery.modaler","last_synced_at":"2025-04-09T11:44:26.496Z","repository":{"id":66354615,"uuid":"101416577","full_name":"Torann/jquery.modaler","owner":"Torann","description":"Not that the jQuery world needed another modal plugin.","archived":false,"fork":false,"pushed_at":"2018-05-29T20:39:51.000Z","size":7,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-15T05:43:44.749Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Torann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2017-08-25T15:20:49.000Z","updated_at":"2018-05-29T20:39:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"b9150d97-12a3-4fda-9cfb-da40d9a184e8","html_url":"https://github.com/Torann/jquery.modaler","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Torann%2Fjquery.modaler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Torann%2Fjquery.modaler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Torann%2Fjquery.modaler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Torann%2Fjquery.modaler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Torann","download_url":"https://codeload.github.com/Torann/jquery.modaler/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248033561,"owners_count":21036813,"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":[],"created_at":"2024-11-05T16:14:10.290Z","updated_at":"2025-04-09T11:44:26.464Z","avatar_url":"https://github.com/Torann.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jQuery Modals\n\nNot that the jQuery world needed another modal plugin. Make sure to read the *requirements* at the bottom.\n\n## Getting Started\n\nYou can install the plugin using Bower:\n\n```bash\nbower install jquery.modaler\n```\n\nThe plugin comes with a simple SASS file for styling the modals.\n\n**Include files**\n\n```html\n\u003clink href=\"modal.min.css\" type=\"text/css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"jquery.modal.js\"\u003e\u003c/script\u003e\n```\n\n## Basic use\n\n### Automatically attaching\n\nThe simplest approach is to add `data-modal` to your desired element and use the attribute's value to specify modal to open.\n\n```html\n\u003cdiv id=\"modal-id\" class=\"modal\"\u003e\n  ...\n\u003c/div\u003e\n\n\u003ca data-modal=\"#modal-id\"\u003eOpen Modal\u003c/a\u003e\n```\n\n## Options\n\n - `action` - this is used to show, hide, or toggle the modal  (default `toggle`)\n - `destroyOnClose` - remove the modal after closing. Useful for dynamic modals. (default `false`)\n - `primaryContent` - this is the selector for the primary content. (default `.modal-content`)\n - `activeClass` - modal active class added to the modal and body tag. (default `modal-is-active`)\n - `inactiveClass` - modal inactive class added to the modal. (default `modal-is-inactive`)\n - `aboveClass` - modal above active class added to the modal once fully visible (default `modal-is-above`)\n\n### Close button\n\n - `backdropCloseEnabled` - clicking on the backdrop closes the modal. (default `true`)\n - `closeBtnSelector` - selector used to close the modal. Must be within the modal. (default `[data-modal-close]`)\n\n### Form options\n\n - `onSubmit` - Callback for onsubmit event. (default `null`)\n - `reload` - Reload the page after submitting. (default `false`)\n - `clearform` - Clear the form after submitting. (default `false`)\n\n\n## Manual Use\n\n```js\nvar $instance = $('#magic-modal').modal({\n    action: null,\n    afterClosed: function(ev) {\n        ev \u0026\u0026 ev.preventDefault();\n\n        // Some action\n    },\n    onSubmit: function(ev, $form) {\n        ev \u0026\u0026 ev.preventDefault();\n\n        // Some form action\n    },\n});\n\n// Open modal\n$instance.modal('show');\n\n// Hide modal\n$instance.modal('hide');\n\n\n// Toggle modal\n$instance.modal('toggle');\n```\n\n### Dynamic Modal\n\nDoing this, the plugin will automatically append the modal to the DOM and carry-on as usual.\n\n```js\nvar $instance = $('\u003cdiv class=\"modal\" data-effect=\"scale\" data-size=\"s\"\u003eSome modal content stuff\u003c/div\u003e').modal();\n```\n\n\u003e You may wish to use the `destroyOnClose: true` option here\n\n## Big Example\n\n**Modal Trigger HTML**\n\n```html\n\u003ca data-modal=\"#settings-modal\" data-reload=\"true\" aria-label=\"Update your settings\"\u003e\n    Update Settings\n\u003c/a\u003e\n```\n\n**Modal HTML**\n\n```html\n\u003cdiv class=\"modal\" id=\"settings-modal\" data-effect=\"scale\" data-size=\"s\"\u003e\n    \u003cdiv class=\"modal-content\"\u003e\n        \u003cheader\u003e\n            \u003ca class=\"modal-close\" data-modal-close=\"true\"\u003e\u003c/a\u003e\n            Update your settings\n        \u003c/header\u003e\n        \u003cdiv class=\"modal-body\"\u003e\n            \u003cform role=\"form\" method=\"POST\" action=\"/path/to/preferences\"\u003e\n                \u003cdiv class=\"input-field\"\u003e\n                    \u003clabel for=\"user-region\"\u003e\n                        Region\n                    \u003c/label\u003e\n                    \u003cselect id=\"user-region\" name=\"region\"\u003e\n                        \u003coption value=\"36\"\u003e\n                            Mexico\n                        \u003c/option\u003e\n                        \u003coption value=\"195\" selected\u003e\n                            United States\n                        \u003c/option\u003e\n                    \u003c/select\u003e\n                \u003c/div\u003e\n\n                \u003cdiv class=\"input-field\"\u003e\n                    \u003clabel for=\"user-language\"\u003e\n                        Language\n                    \u003c/label\u003e\n                    \u003cselect id=\"user-language\" name=\"locale\"\u003e\n                        \u003coption value=\"en\" selected\u003e\n                            English\n                        \u003c/option\u003e\n                        \u003coption value=\"es\"\u003e\n                            español\n                        \u003c/option\u003e\n                    \u003c/select\u003e\n                \u003c/div\u003e\n\n                \u003cdiv class=\"input-buttons\"\u003e\n                    \u003cbutton type=\"submit\"\u003e\n                        Update\n                    \u003c/button\u003e\n                \u003c/div\u003e\n            \u003c/form\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Requirements\n\n - [jquery.form](http://malsup.com/jquery/form)\n\nThis helper function toggles an on page load indicator.\n\n```\n$.toggleLoader(int) // Int: 1 = show, 0 = hide\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorann%2Fjquery.modaler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftorann%2Fjquery.modaler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorann%2Fjquery.modaler/lists"}