Modal Layout by vtex

This page is about version 0.4.2 of the app, which is not the most recent version. The latest stable version is 0.14.1.

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

{"base64":" ","img":{"width":2880,"height":1586,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1310565,"url":"https://user-images.githubusercontent.com/8517023/73455440-da778f00-434e-11ea-9d38-e31b2576b670.png"}}

Configuration

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


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

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`	Its child block defines how the Modal content will be triggered.
`modal-layout`	Defines how the Modal content will be rendered.

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


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

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 how the Modal content should be rendered. For example:


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

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 Rich text.

modal-trigger

Prop name	Type	Description	Default value
`trigger`	`Enum`	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 appears just once per session (`load-session`)	`'click'`

Customization

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.

CSS Handles
`backdropContainer`
`backdrop`
`closeButtonContainer`
`closeButton`
`container`
`contentContainer`
`headerContainer`
`headerContent`
`triggerContainer`