Popups

Modal popups using the ModalContainer/V1 in the page's popup property.

Popup Structure

The popup is defined in the root popup property of the page tree:

JSON

{
  "version": 158,
  "content": { /* ContentNode */ },
  "settings": { /* Settings */ },
  "popup": {
    "id": "6Z-PopUp-0",
    "version": 0,
    "type": "ModalContainer/V1",
    "selectors": {
      ".containerModal": {
        "attrs": {
          "data-skip-corners-settings": "false",
          "data-style-guide-corner": "style1",
          "style": { "margin-bottom": 0 }
        }
      }
    },
    "children": []
  }
}

Modal Selectors

Selector	Purpose
`.containerModal`	The modal content container (styling)
`.modal-wrapper`	The overlay/backdrop
`.elModalInnerContainer`	Inner container (width control)

Styling the Modal

JSON

{
  "popup": {
    "id": "6Z-PopUp-0",
    "type": "ModalContainer/V1",
    "selectors": {
      ".containerModal": {
        "attrs": {
          "data-skip-corners-settings": "false",
          "data-skip-shadow-settings": "false",
          "style": {
            "margin-bottom": 10,
            "margin-top": 45,
            "border-radius": 16
          }
        },
        "params": {
          "margin-bottom--unit": "px",
          "margin-top--unit": "px",
          "border-radius--unit": "px",
          "--style-border-style": "solid",
          "--style-border-width": 1,
          "--style-border-color": "#e2e8f0",
          "--style-border-width--unit": "px",
          "--style-box-shadow-distance-x": 0,
          "--style-box-shadow-distance-y": 8,
          "--style-box-shadow-blur": 24,
          "--style-box-shadow-spread": 0,
          "--style-box-shadow-color": "rgba(0, 0, 0, 0.15)"
        }
      },
      ".modal-wrapper": {
        "params": {
          "--style-background-color": "rgba(0, 0, 0, 0.5)"
        }
      },
      ".elModalInnerContainer": {
        "params": {
          "width--unit": "px"
        },
        "attrs": {
          "style": { "width": 600 }
        }
      }
    }
  }
}

Popup Content

The popup's children follow the same structure as regular page content:

JSON

{
  "popup": {
    "type": "ModalContainer/V1",
    "children": [
      {
        "type": "SectionContainer/V1",
        "attrs": {
          "data-paint-colors": "lightest",
          "className": "fullContainer",
          "style": { "border-radius": 16 }
        },
        "children": [
          {
            "type": "RowContainer/V1",
            "attrs": { "style": { "width": "100%" } },
            "children": [
              {
                "type": "ColContainer/V1",
                "params": { "mdNum": 12 },
                "children": [
                  { "type": "Headline/V1" },
                  { "type": "Input/V1" },
                  { "type": "Button/V1" }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Triggering the Popup

Open the popup with a button:

JSON

{
  "type": "Button/V1",
  "params": {
    "href": "#open-popup",
    "target": "_self"
  }
}

Close the popup from inside:

JSON

{
  "type": "Button/V1",
  "params": {
    "href": "#close-popup",
    "target": "_self"
  }
}

Clickable image that opens popup:

JSON

{
  "type": "Image/V2",
  "selectors": {
    ".elImage": {
      "attrs": {
        "data-element-link": "#open-popup"
      }
    }
  }
}

Overlay Color

Customize the backdrop overlay:

JSON

{
  "selectors": {
    ".modal-wrapper": {
      "params": {
        "--style-background-color": "rgba(0, 0, 0, 0.7)"
      }
    }
  }
}