The Modal Layout app provides blocks to help you create modals in your store.

1. Add the Modal Layout app to your theme dependencies in the manifest.json:

  "dependencies": {
+   "vtex.modal-layout": "0.x"
  }

Now, you can use all blocks exported by the modal-layout app. See the full list below:

Block name	Description
modal-trigger	Defines how the modal content will be triggered through its children blocks.
modal-layout	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.
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.
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.
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.
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.

2. Add the modal-trigger block in any store template you choose. In the example below, it will be added to the homepage:

{
  "store.home": {
    "children": [
      "modal-trigger#example"
    ]
  },

3. 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:

{
  "store.home": {
    "children": ["modal-trigger#example"]
  },
  "modal-trigger#example": {
    "children": ["rich-text#example", "modal-layout#example"]
  },
  "rich-text#example": {
    "props": {
      "text": "Click me"
    }
  },
  "modal-layout#example": {
    "children": ["rich-text#modal-content"]
  },
  "rich-text#modal-content": {
    "props": {
      "text": "Hello"
    }
  }
}

In the example above, the 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.

To apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS handles for store customization.