{"id":17038637,"url":"https://github.com/wbotelhos/modaly","last_synced_at":"2025-04-12T13:52:54.492Z","repository":{"id":8643464,"uuid":"10292898","full_name":"wbotelhos/modaly","owner":"wbotelhos","description":":eight_pointed_black_star: Modaly - A Tiny Modal","archived":false,"fork":false,"pushed_at":"2024-12-29T23:16:47.000Z","size":508,"stargazers_count":4,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T08:37:12.206Z","etag":null,"topics":["box","lightbox","modal","overlay","popup","window"],"latest_commit_sha":null,"homepage":"https://www.wbotelhos.com","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/wbotelhos.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"patreon":"wbotelhos"}},"created_at":"2013-05-26T03:06:07.000Z","updated_at":"2024-12-29T23:16:51.000Z","dependencies_parsed_at":"2022-08-22T10:00:48.750Z","dependency_job_id":null,"html_url":"https://github.com/wbotelhos/modaly","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wbotelhos%2Fmodaly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wbotelhos%2Fmodaly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wbotelhos%2Fmodaly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wbotelhos%2Fmodaly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wbotelhos","download_url":"https://codeload.github.com/wbotelhos/modaly/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248576396,"owners_count":21127385,"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":["box","lightbox","modal","overlay","popup","window"],"created_at":"2024-10-14T08:57:20.085Z","updated_at":"2025-04-12T13:52:54.469Z","avatar_url":"https://github.com/wbotelhos.png","language":"JavaScript","funding_links":["https://patreon.com/wbotelhos","https://github.com/sponsors/wbotelhos"],"categories":[],"sub_categories":[],"readme":"# Modaly - A Tiny Modal\n\n[![Tests](https://github.com/wbotelhos/modaly/workflows/Tests/badge.svg)](https://github.com/wbotelhos/modaly/actions)\n[![NPM Version](https://badge.fury.io/js/modaly.svg)](https://badge.fury.io/js/modaly)\n[![Maintainability](https://api.codeclimate.com/v1/badges/622fc59d2778de69f93a/maintainability)](https://codeclimate.com/github/wbotelhos/modaly/maintainability)\n[![Sponsor](https://img.shields.io/badge/sponsor-%3C3-green)](https://github.com/sponsors/wbotelhos)\n\nModaly is a plugin that generates a tiny modal window.\n\n## Options\n\n|Property         |Default         |Description\n|-----------------|----------------|-\n|`attribute`      |`'href'`        |Changes the attribute responsible to indicate the modal's selector.\n|`block`          |`false`         |Prevents the modal to open.\n|`closeButton`    |`true`          |Show the close button.\n|`closeOverlay`   |`true`          |Enable close modal clicking on the overlay element.\n|`closeSelector`  |`'[data-close]'`|Close button selector.\n|`esc`            |`true`          |Enable the key esc to close the modal.\n|`overlayOpacity` |`.5`            |Opacity applied on the overlay element.\n|`overlaySelector`|`.5`            |The selector of the overlay element.\n|`prevent`        |`true`          |Prevent the click action on binded element.\n|`speed`          |`200`           |Speed to open and close the modal.\n\n## Usage\n\n**Binding a button for opening**\n\n```html\n\u003cdiv data-modal\u003e\n  \u003cspan data-close\u003ex\u003c/span\u003e\n\u003c/div\u003e\n```\n\n```html\n\u003ca data-button href=\"[data-modal]\"\u003eopen\u003c/a\u003e\n```\n\n```js\nconst button = document.querySelector('[data-button]');\n\nnew Modaly(button).init();\n```\n\n**Using only the API**\n\n```html\n\u003cdiv data-modal\u003e\n  \u003cspan data-close\u003ex\u003c/span\u003e\n\u003c/div\u003e\n```\n\n```js\nconst modal = document.querySelector('[data-modal]');\nconst modaly = new Modaly(modal).init();\n\nmodaly.open()\n```\n\n## Callbacks\n\nCallbacks are triggered over the binded element.\n\n|Event            |Description\n|-----------------|-\n|`'modaly:opened'`|Triggered when modaly is opened.\n|`'modaly:closed'`|Triggered when modaly is closed.\n\n## Functions\n\n|Function                       |Description\n|-------------------------------|-\n|`modaly.open()`                |Open the modal.\n|`modaly.open({ key: 'value' })`|Open and add params at modal.\n|`modaly.close()`               |Close the modal.\n|`modaly.close(['key'])`        |Close and removes keys data from modal.\n|`modaly.block(boolean)`        |Block or unblock the modal.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwbotelhos%2Fmodaly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwbotelhos%2Fmodaly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwbotelhos%2Fmodaly/lists"}