{"id":39487544,"url":"https://github.com/vtex-apps/modal-layout","last_synced_at":"2026-01-18T05:28:37.678Z","repository":{"id":38427041,"uuid":"222766578","full_name":"vtex-apps/modal-layout","owner":"vtex-apps","description":"The Modal Layout app provides blocks that can help you create modals in your store.","archived":false,"fork":false,"pushed_at":"2025-07-26T00:00:33.000Z","size":819,"stargazers_count":3,"open_issues_count":4,"forks_count":12,"subscribers_count":38,"default_branch":"master","last_synced_at":"2025-07-26T07:17:44.265Z","etag":null,"topics":["hacktoberfest","store-framework","vtex-io"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/vtex-apps.png","metadata":{"files":{"readme":"docs/README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-11-19T18:51:37.000Z","updated_at":"2025-06-26T12:43:35.000Z","dependencies_parsed_at":"2025-03-31T21:25:01.761Z","dependency_job_id":"41e73a89-7b2b-4381-b422-977c617d9a1a","html_url":"https://github.com/vtex-apps/modal-layout","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"purl":"pkg:github/vtex-apps/modal-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fmodal-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fmodal-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fmodal-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fmodal-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex-apps","download_url":"https://codeload.github.com/vtex-apps/modal-layout/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fmodal-layout/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28530817,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["hacktoberfest","store-framework","vtex-io"],"created_at":"2026-01-18T05:28:37.596Z","updated_at":"2026-01-18T05:28:37.658Z","avatar_url":"https://github.com/vtex-apps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"📢 Use this project, [contribute](https://github.com/vtex-apps/modal-layout) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).\n\n# Modal Layout\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\nThe Modal Layout app provides blocks to help you create modals in your store.\n\n![image](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-modal-layout-0.png)\n\n## Configuration\n\n1. Add the Modal Layout app to your theme dependencies in the `manifest.json`:\n\n```diff\n  \"dependencies\": {\n+   \"vtex.modal-layout\": \"0.x\"\n  }\n```\n\nNow, you can use all blocks exported by the `modal-layout` app. See the full list below:\n\n| Block name            | Description                                                                                                                                                                                                                                                                                                                                                     |\n| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `modal-trigger`       | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) Defines how the modal content will be triggered through its children blocks.                                                                                                                                        |\n| `modal-layout`        | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) Defines how the modal content will be rendered through its children blocks. You can declare the `modal-header` and `modal-content` blocks, described below, as children to create a modal with a header and footer. |\n| `modal-header`        | Renders a close button and the blocks listed as its children, building a modal header. Note that it does not automatically render a header for your modal. Instead, you should create the modal header as you desire using the children list of this block.                                                                                                     |\n| `modal-content`       | Defines how the modal content will be rendered through its children blocks. Preferably, this block should be used along with the `modal-header` block in order to create a modal with a header and a footer.                                                                                                                                                    |\n| `modal-actions`       | Logical block that only renders its child blocks that, in turn, render call-to-action buttons inside the modal, such as a confirmation button.                                                                                                                                                                                                                  |\n| `modal-actions.close` | Button that closes the modal when clicked. It is extremely useful when your modal only has a form or a disclaimer box providing information to the users.                                                                                                                                                                                                       |\n\n2. Add the `modal-trigger` block in any store template you choose. In the example below, it will be added to the homepage:\n\n```jsonc\n{\n  \"store.home\": {\n    \"children\": [\n      \"modal-trigger#example\"\n    ]\n  },\n```\n\n3. Declare the `modal-trigger` block using its prop and configure the children blocks. The first child block of `modal-trigger` must be a block you choose to trigger the modal content. Then, a sibling block called `modal-layout` will be needed to effectively define the modal content through its child block list. For example:\n\n```jsonc\n{\n  \"store.home\": {\n    \"children\": [\"modal-trigger#example\"]\n  },\n  \"modal-trigger#example\": {\n    \"children\": [\"rich-text#example\", \"modal-layout#example\"]\n  },\n  \"rich-text#example\": {\n    \"props\": {\n      \"text\": \"Click me\"\n    }\n  },\n  \"modal-layout#example\": {\n    \"children\": [\"rich-text#modal-content\"]\n  },\n  \"rich-text#modal-content\": {\n    \"props\": {\n      \"text\": \"Hello\"\n    }\n  }\n}\n```\n\nIn the example above, the [Rich Text](https://developers.vtex.com/docs/apps/vtex.rich-text/) block renders the `Click me` text that will trigger the modal content when clicked. The modal content, in turn, is defined by the `modal-layout` block. Based on the example above, the modal content triggered by the `Click me` Rich Text would be a `Hello` text.\n\n### `modal-trigger` props\n\n| Prop name              | Type     | Description                                                                                                                                                                                                                                                                                                                                                   | Default value |\n| ---------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |\n| `trigger`              | `enum`   | Defines whether the modal content should be triggered by user click (`click`), when the page is fully loaded (`load`), or when the page is fully loaded, but the modal will appear just once per session (`load-session`).                                                                                                                                    | `click`       |\n| `customPixelEventId`   | `string` | Store event ID that triggers the `modal-trigger` block (hence triggering the opening of `modal-layout` blocks on the interface as well).                                                                                                                                                                                                                      | `undefined`   |\n| `customPixelEventName` | `string` | Store event name that triggers the `modal-trigger` block (hence triggering the opening of `modal-layout` blocks on the interface as well). Some event examples are `'addToCart'` and `'removeFromCart'`. Note that using this prop will make the associated `modal-layout` open in **every** event with the specified name if no `customPixelEventId` is set. | `undefined`   |\n\n### `modal-layout` props\n\n| Prop name              | Type      | Description                                                                                                                                                                                                                                                                                                                                                   | Default value |\n| ---------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |\n| `scroll`               | `enum`    | Defines how users should scroll the modal. Possible values are: `body` (users can scroll the whole modal by normally scrolling the page) and `content` (users can scroll the modal _content_ when hovering over it).                                                                                                                                          | `content`     |\n| `blockClass`           | `string`  | Unique block ID to be used in [CSS customizations](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).                                                                                                                                                                                                  | `undefined`   |\n| `disableEscapeKeyDown` | `boolean` | Defines whether the modal should be closed when pressing the `Esc` key (`true`) or not (`false`).                                                                                                                                                                                                                                                             | `false`       |\n| `fullScreen`           | `boolean` | Defines whether the modal should fill the whole screen (`true`) or not (`false`). This prop is responsive, i.e., it adapts to the device breakpoints.                                                                                                                                                                                                         | `false`       |\n| `backdrop`             | `enum`    | Defines whether the modal will have a clickable backdrop (`clickable`) or no backdrop at all (`none`). This prop is responsive, i.e., it adapts to the device breakpoints.                                                                                                                                                                                    | `clickable`   |\n| `customPixelEventId`   | `string`  | Store event ID that triggers the `modal-layout` block (hence triggering the closing of `modal-layout` blocks on the interface as well).                                                                                                                                                                                                                       | `undefined`   |\n| `customPixelEventName` | `string`  | Store event name that triggers the `modal-layout` block (hence triggering the closing of `modal-layout` blocks on the interface as well). Some event examples are `'addToCart'` and `'removeFromCart'`. Note that using this prop will make the associated `modal-layout` close in **every** event with the specified name if no `customPixelEventId` is set. | `undefined`   |\n\n### `modal-header` props\n\n| Prop name         | Type      | Description                                                                                             | Default value |\n| ----------------- | --------- | ------------------------------------------------------------------------------------------------------- | ------------- |\n| `showCloseButton` | `boolean` | Defines whether the close icon button should be rendered in the modal header (`true`) or not (`false`). | `true`        |\n| `iconCloseSize`   | `number`  | Size (in pixels) of the close icon button in the modal header.                                          | `32`          |\n\n### `modal-actions.close` props\n\n| Prop name | Type     | Description                                                                                                                                                                                                                                                     | Default value                                                                                                            |\n| --------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |\n| `label`   | `string` | Defines the text to be rendered in the close button. The default value of this prop depends on the store's default language, which is set according to the website [binding](https://help.vtex.com/tutorial/what-is-binding--4NcN3NJd0IeYccgWCI8O2W?locale=en). | `Cancel`, `Cancelar`, or `Cancelar` for stores whose default language is, respectively, English, Spanish, or Portuguese. |\n\n## Customization\n\nTo apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS handles for store customization](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).\n\n| CSS handles            |\n| ---------------------- |\n| `modal`                |\n| `backdropContainer`    |\n| `backdrop`             |\n| `closeButtonContainer` |\n| `closeButton`          |\n| `container`            |\n| `contentContainer`     |\n| `headerContainer`      |\n| `headerContent`        |\n| `paper`                |\n| `topRow`               |\n| `triggerContainer`     |\n\n\u003c!-- DOCS-IGNORE:start --\u003e\n\n## Contributors ✨\n\nThanks goes to these wonderful people:\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/BeatrizMiranda\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/28959326?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBeatriz Miranda\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/modal-layout/commits?author=BeatrizMiranda\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://acct.global/\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/38354801?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eweslybrandao\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/modal-layout/commits?author=weslybrandao\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/renanguerraa1\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/69531548?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRenan Guerra\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/modal-layout/commits?author=renanguerraa1\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!\n\n\u003c!-- DOCS-IGNORE:end --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fmodal-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex-apps%2Fmodal-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fmodal-layout/lists"}