{"id":25448851,"url":"https://github.com/substrate-system/modal","last_synced_at":"2025-08-21T15:09:59.379Z","repository":{"id":246123445,"uuid":"820141266","full_name":"substrate-system/modal","owner":"substrate-system","description":"Modal window web component","archived":false,"fork":false,"pushed_at":"2025-05-09T00:58:45.000Z","size":54,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-16T08:09:24.818Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://substrate-system.github.io/modal/","language":"TypeScript","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/substrate-system.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2024-06-25T22:15:49.000Z","updated_at":"2025-05-09T00:58:50.000Z","dependencies_parsed_at":"2025-03-26T06:36:49.614Z","dependency_job_id":"ee5fb0d6-ccad-4f6b-88c0-d8a29f128721","html_url":"https://github.com/substrate-system/modal","commit_stats":null,"previous_names":["nichoth/modal"],"tags_count":2,"template":false,"template_full_name":"substrate-system/template-web-component","purl":"pkg:github/substrate-system/modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fmodal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fmodal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fmodal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fmodal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/substrate-system","download_url":"https://codeload.github.com/substrate-system/modal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fmodal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260829337,"owners_count":23069278,"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":"2025-02-17T20:15:20.857Z","updated_at":"2025-06-25T04:31:45.524Z","avatar_url":"https://github.com/substrate-system.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# modal\n![tests](https://github.com/nichoth/modal/actions/workflows/nodejs.yml/badge.svg)\n[![types](https://img.shields.io/npm/types/@nichoth/modal?style=flat-square)](README.md)\n[![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)\n[![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver\u0026style=flat-square)](https://semver.org/)\n[![dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen.svg?style=flat-square)](package.json)\n[![license](https://img.shields.io/badge/license-Polyform_Non_Commercial-26bc71?style=flat-square)](LICENSE)\n\n\nModal dialog window\n\nSee [smashingmagazine.com article](https://www.smashingmagazine.com/2022/04/cta-modal-build-web-component/) and [nathansmith/cta-modal](https://github.com/nathansmith/cta-modal/tree/main).\n\n## demo\n\nSee [nichoth.github.io/modal](https://nichoth.github.io/modal/).\n\n## install\n\n```sh\nnpm i -S @nichoth/modal\n```\n\n## use\n\n### bundler\n\nJust import; this calls the global function `window.customElements.define`.\n\n```js\nimport '@nichoth/modal'\n```\n\nThen use the tag in HTML:\n\n```html\n\u003cmodal-window\u003e\n    \u003cdiv slot=\"button\"\u003e\n        \u003cp\u003e\n            \u003cbutton class=\"cta-modal-toggle\" type=\"button\"\u003e\n                Open modal\n            \u003c/button\u003e\n        \u003c/p\u003e\n    \u003c/div\u003e\n\n    \u003cdiv slot=\"modal\"\u003emodal content?\u003c/div\u003e\n    \u003cdiv slot=\"modal\"\u003emore modal content\u003c/div\u003e\n\u003c/modal-window\u003e\n```\n\n### HTML only\n\nFirst copy the file to a location accessible to your web server.\n\n```sh\ncp ./node_modules/@nichoth/modal/dist/index.min.js ./public/modal.js\n```\n\nThen link to the file in HTML\n```html\n\u003cbody\u003e\n    \u003cp\u003e...content...\u003c/p\u003e\n    \u003cscript type=\"module\" src=\"/modal.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\n## API\n\n### attributes\n\nSee [nathansmith/cta-modal](https://github.com/nathansmith/cta-modal/tree/main?tab=readme-ov-file#how-to-use-extras)\n\n#### Plus\n\n##### closable\n\nTake an attribute `closable`. If you pass in `closable=\"false\"`, then it will\nrender without a 'close' button, and escape key and clicks will not close the\nmodal. You would need to open/close it via your application state.\n\n```html\n\u003cmodal-window closable=\"false\"\u003e\n    \u003cdiv slot=\"button\"\u003e\n        \u003cp\u003e\n            \u003cbutton\n                class=\"cta-modal-toggle\"\n                type=\"button\"\n            \u003e\n                Open a modal that can't be closed\n            \u003c/button\u003e\n        \u003c/p\u003e\n    \u003c/div\u003e\n    \u003cdiv slot=\"modal\"\u003emodal content?\u003c/div\u003e\n    \u003cdiv slot=\"modal\"\u003emore modal content\u003c/div\u003e\n\u003c/modal-window\u003e\n```\n\n## example\n\n[See `./example`](./example/).\n\n## credits\n\nThanks [@nathansmith](https://github.com/nathansmith) and [Smashing Magazine](https://www.smashingmagazine.com/2022/04/cta-modal-build-web-component/) for publishing this originally.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Fmodal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubstrate-system%2Fmodal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Fmodal/lists"}