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

1. Add the modal layout's app to your theme's dependencies in the manifest.json:

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

Now, you are able to use all blocks exported by the modal-layout app. Check out 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 as its children the blocks modal-header and modal-content, described below, in order to create a modal with header and footer.
modal-header	Renders a close button and the blocks listed as its children, building a modal header. Notice: it does not automatically render a header for your modal. Instead, you should create the modal header as you desire using this block's children list.
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 in order to create a modal with header and footer.
modal-actions	Logical block only responsible for rendering its child blocks that, in turn, are responsible for rendering call-to-action buttons inside the modal, such as a confirmation button.
modal-actions.close	Button that closes the modal when clicked on. It is extremely useful in scenarios where your modal only has a form or a disclaimer box providing information for users.

2. Add the modal-trigger block in any store template of your choosing. In the example below, it will be added to the Home page:

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

3. Declare the modal-trigger block using its prop and configuring children blocks for it. The modal-trigger's first children must be a block of your choosing 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 on. The modal content, in turn, is defined by the modal-layout block. According to the example above, the Modal content triggered by the Click me Rich Text would be a Hello text.

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.