{"id":24765673,"url":"https://github.com/jsmithdev/modal","last_synced_at":"2026-02-23T21:08:51.627Z","repository":{"id":56483028,"uuid":"217484989","full_name":"jsmithdev/modal","owner":"jsmithdev","description":"An LWC modal with easy to use sizes, attributes and slots :slot_machine:","archived":false,"fork":false,"pushed_at":"2023-07-30T06:48:36.000Z","size":30,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-28T23:15:17.074Z","etag":null,"topics":["lightning-web-components","lightningwebcomponents","lwc","salesforce"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/jsmithdev.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":"2019-10-25T08:12:01.000Z","updated_at":"2023-05-08T21:51:31.000Z","dependencies_parsed_at":"2025-01-28T23:15:19.632Z","dependency_job_id":null,"html_url":"https://github.com/jsmithdev/modal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsmithdev%2Fmodal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsmithdev%2Fmodal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsmithdev%2Fmodal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsmithdev%2Fmodal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsmithdev","download_url":"https://codeload.github.com/jsmithdev/modal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245137085,"owners_count":20566695,"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":["lightning-web-components","lightningwebcomponents","lwc","salesforce"],"created_at":"2025-01-28T23:15:15.443Z","updated_at":"2025-10-31T13:03:23.680Z","avatar_url":"https://github.com/jsmithdev.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# modal\n\n## An LWC modal with easy to use sizes, attributes and slots 🎰\n\n## API\n\n### Functions\n\n| Syntax      | Description | Usage     |\n| :---        |    :---   |   :--- |\n| open    | open model from outside       | `this.template.querySelector('c-modal').open()`       |\n| close   | close model from outside      | `this.template.querySelector('c-modal').close()`      |\n| isOpen  | check modal from outside      | `this.template.querySelector('c-modal').isOpen()`     |\n\n### Attributes\n\n| Syntax      | Description | Usage     |\n| :---        |    :---   |   :--- |\n| header    | header / title for modal       | `header=\"My Title\"`       |\n| trigger   | optional text that triggers / opens modal     | `trigger=\"Click Me\"`  |\n| variant  | size of modal (large, medium, small)  | `variant=\"large\"` |\n\n### Slots\n\n| Syntax      | Description | Usage     |\n| :---        |    :---   |   :--- |\n| header    | header content  | `\u003cspan slot=\"header\"\u003e { DOM to render } \u003c/span\u003e`      |\n| content  | content for the body of the modal  | `\u003cspan slot=\"content\"\u003e { DOM to render } \u003c/span\u003e` |\n| footer  | footer content  | `\u003cspan slot=\"footer\"\u003e { DOM to render } \u003c/span\u003e` |\n| footer-center  | footer content to be centered | `\u003cspan slot=\"footer-center\"\u003e { DOM to render } \u003c/span\u003e` |\n| trigger   | optionally trigger modal from DOM content  |`\u003cspan slot=\"trigger\"\u003e { DOM to render } \u003c/span\u003e` |\n\n## Usage\n\nTwo example implementations are [here](force-app/main/default/lwc/exampleModal/exampleModal.html) -- works well with lwc local dev server\n\n📌 Can use any combo of slots and attributes (slots override attributes if both are given)\n\n### Create a simple modal using attributes and the `content` slot for content:\n\n```html\n\n\u003cc-modal\n    header=\"This is a header\"\n    trigger=\"Text to trigger modal\"\u003e\n\n    \u003cspan slot=\"content\"\u003e\n\n        \u003ctemplate for:item=\"thing\" for:each={data.things} \u003e\n            {thing.avatar} {thing.name} \u003cbr key={thing.name} /\u003e\n        \u003c/template\u003e\n\n    \u003c/span\u003e\n\n\u003c/c-modal\u003e\n```\n\n\u003c!-- \u003cimg src=\"https://i.imgur.com/irT1Rfm.png\" width=\"500px\" /\u003e --\u003e\n\n### Or highly customize by using slots:\n\n```html\n\n\u003cc-modal variant=\"large\"\u003e\n\n    \u003cspan slot=\"trigger\"\u003e\n        \u003clightning-pill\n            label=\"Open modal using the trigger slot instead of the trigger attribute to pass in DOM instead of text\"\n        \u003e\u003c/lightning-pill\u003e\n    \u003c/span\u003e\n\n    \u003cspan slot=\"header\"\u003e\n        \u003ca href=\"lwc.land\" target=\"_blank\"\u003e\n          This is a custom header using the header slot instead of the header attribute to pass in DOM instead of text\n        \u003c/a\u003e\n    \u003c/span\u003e\n\n    \u003cspan slot=\"content\"\u003e\n\n        \u003ctemplate for:item=\"thing\" for:each={data.things} \u003e\n            {thing.avatar} {thing.name} \u003cbr key={thing.name} /\u003e\n        \u003c/template\u003e\n\n    \u003c/span\u003e\n\n    \u003cspan slot=\"footer\"\u003e\n\n        \u003clightning-button \n            label=\"Can pass in DOM like buttons to add the the modal's footer\"\n            variant=\"brand\"\n            onclick={demo_click}\u003e\n        \u003c/lightning-button\u003e\n\n    \u003c/span\u003e\n\n\u003c/c-modal\u003e\n```\n\n\u003c!-- img src=\"https://i.imgur.com/BXiNM4H.png\" width=\"500px\" / --\u003e\n\n## Deploy\n\n```bash\nsfdx force:source:deploy -p force-app/main/default/lwc/modal\n```\n\n📌  Above deploys to the default org set; Add `-u user@domain.com` or `-u alias` to deploy else where\n\nResults should more or less mirror below\n\n```bash\njamie@the-gene:~/repo/modal$ sfdx force:source:deploy -p force-app/main/default/lwc/modal -u some-org\n\nDeploy ID: 0Af1700002qWfDOCA0\nDEPLOY PROGRESS | ████████████████████████████████████████ | 1/1 Components\n\n=== Deployed Source\n\n FULL NAME TYPE                     PROJECT PATH                                       \n ───────── ──────────────────────── ────────────────────────────────────────────────── \n modal     LightningComponentBundle force-app/main/default/lwc/modal/modal.css         \n modal     LightningComponentBundle force-app/main/default/lwc/modal/modal.html        \n modal     LightningComponentBundle force-app/main/default/lwc/modal/modal.js          \n modal     LightningComponentBundle force-app/main/default/lwc/modal/modal.js-meta.xml \n\nDeploy Succeeded.\n\n```\n\n### Deploy Singular\n\n```bash\nsfdx force:source:deploy -p force-app/main/default/lwc/modal -u some-org\n```\n\n---\n\nwritten with 💙 by Jamie Smith\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsmithdev%2Fmodal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsmithdev%2Fmodal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsmithdev%2Fmodal/lists"}