Modal

Aşağıdaki alan düzeyi katalog tabloları İngilizce kalır — düzenleyici, API ve MCP’nin kullandığı makine tasarım şemasıyla birebir uyumludur.

Decoration and visibility use Dekorasyon ve görünürlük (BlockShell).

Named overlay dialog with a single content slot. Nested FlexListBlock flexDirection/gap apply normally (panel is a flex column). ButtonBlock toggles it by stable block id (modalId); the Name field is an editor-only label and is not localized. Set ariaLabel for the public dialog accessible name (localized). Use Show in editor to edit the slot. On the published site the modal starts closed. Open and close animations are configured separately; optional panel glass uses translucent fill + backdrop blur. Focus is trapped while open and restored to the invoking control on dismiss.

Examples

Newsletter modal

{
  "name": "Newsletter",
  "ariaLabel": "Newsletter signup",
  "show": true,
  "overlay": {
    "dismissOnBackdrop": true
  },
  "content": []
}

Fields

name

Editor-only friendly label shown in modal target pickers. Not localized; changing it does not break button links.

name: "Newsletter"

content

Nested blocks shown inside the modal panel.

content: []

show

Editor-only control — does not persist its own value.

Editor only: when true, the modal content is expanded in the canvas so nested blocks are editable. Ignored on the published site.

show: true

ariaLabel

Public accessible name for the dialog (aria-label). Localized. Distinct from editor-only name.

ariaLabel: "Newsletter signup"

overlay

dismissOnBackdrop

When true, backdrop click and Escape close the modal. When false, only a button/wrapper targeting this modal (or other code) can close it.

overlay: {
  dismissOnBackdrop: true
}

animation

openAnimationEnabled

When true, play an enter animation when the modal opens.

openAnimationEnabled: true

openAnimationType

Enter motion: fade, fadeScale, or slideUp.

animation: {
  openAnimationType: "fadeScale"
}

openAnimationDurationMs

Enter duration in milliseconds.

animation: {
  openAnimationDurationMs: 220
}

closeAnimationEnabled

When true, play a leave animation when the modal closes.

closeAnimationEnabled: true

closeAnimationType

Leave motion: fade, fadeScale, or slideUp. Defaults to the open type when omitted.

animation: {
  closeAnimationType: "fadeScale"
}

closeAnimationDurationMs

Leave duration in milliseconds.

animation: {
  closeAnimationDurationMs: 180
}

panel

panelBackgroundColorLight

Panel fill in light mode. Use translucent colors for glass.

panel: {
  panelBackgroundColorLight: "#f0f0f54d"
}

panelBackgroundColorDark

Panel fill in dark mode.

panel: {
  panelBackgroundColorDark: "#0000004d"
}

panelBackdropEnabled

Enable backdrop-filter blur on the modal panel.

panelBackdropEnabled: true

panelBackdropBlurPx

Panel backdrop blur in pixels.

panel: {
  panelBackdropBlurPx: 15
}

panelBackdropGrayscale

Panel backdrop grayscale amount from 0 to 1.

panel: {
  panelBackdropGrayscale: 1
}

<details><summary>Default props</summary>

{
  "shell": {
    "visibility": {
      "authVisibility": "all",
      "routeLockVisibility": "all",
      "roleVisibility": [],
      "entryActionVisibility": "all",
      "queryPageVisibility": "all",
      "hideWhenEmpty": ""
    },
    "anchor": {
      "anchorId": "",
      "anchorKey": ""
    },
    "spacing": {
      "padding": {
        "value": "none",
        "enabled": false
      },
      "margin": {
        "enabled": false
      }
    },
    "box": {
      "enabled": false
    },
    "background": {
      "enabled": false,
      "width": "page",
      "kind": "solid",
      "solid": {
        "color": {
          "light": "",
          "dark": ""
        }
      },
      "gradient": {
        "angle": 180,
        "type": "linear",
        "colors": [
          {
            "light": "",
            "dark": "",
            "offset": 50
          },
          {
            "light": "",
            "dark": "",
            "offset": 50
          }
        ],
        "color1Light": "",
        "color1Dark": "",
        "color2Light": "",
        "color2Dark": ""
      },
      "image": {
        "src": "",
        "mode": "cover",
        "repeatSize": 100,
        "position": "center"
      },
      "motion": {
        "enabled": false,
        "directionDeg": 0,
        "speed": 20,
        "rotateDegPerSec": 0,
        "animationMode": "particle"
      },
      "video": {
        "src": "",
        "source": "file",
        "youtubeUrl": "",
        "fit": "cover",
        "loop": true,
        "repeatSize": 100
      },
      "particles": {
        "shape": "circle",
        "svgSrc": "",
        "colorMode": "solid",
        "colorLight": "#ffffff88",
        "colorDark": "#ffffff66",
        "size": 12,
        "jitter": 0.2,
        "count": 40,
        "lifetimeSec": 4,
        "speed": 40,
        "animType": "fade",
        "fromSide": "left",
        "toSide": "right"
      },
      "grid": {
        "style": "cells",
        "motionDirectionDeg": 0,
        "motionSpeed": 0,
        "rotateDegPerSec": 0,
        "hoverGrowLimitPct": 50,
        "hoverRotateLimitDeg": 0,
        "reactionTimeSec": 1,
        "hoverGrow": true,
        "hoverRotate": false,
        "hoverColor": false,
        "hoverColorLight": "#ffffff55",
        "hoverColorDark": "#ffffff33",
        "reactionSpeed": 1
      },
      "backdrop": {
        "enabled": false,
        "blurPx": 0,
        "brightness": 1,
        "contrast": 1,
        "saturate": 1,
        "grayscale": 0,
        "sepia": 0,
        "hueRotateDeg": 0
      }
    },
    "pointerEvents": "auto",
    "effects": {
      "enabled": false,
      "opacity": 1,
      "blurPx": 0,
      "brightness": 1,
      "contrast": 1,
      "saturate": 1,
      "grayscale": 0,
      "sepia": 0,
      "hueRotateDeg": 0,
      "dropShadowOffsetX": 0,
      "dropShadowOffsetY": 0,
      "dropShadowBlur": 0,
      "dropShadowColorLight": "",
      "dropShadowColorDark": "",
      "mixBlendMode": "normal"
    },
    "animation": {
      "scroll": {
        "enabled": false,
        "type": "fadeIn",
        "duration": 600,
        "delay": 0
      },
      "tilt": {
        "enabled": false,
        "intensity": 12
      },
      "wander": {
        "enabled": false,
        "speed": 40,
        "jitter": 40,
        "turnRadius": 50,
        "turnSmoothness": 40,
        "limits": "parent"
      },
      "transform": {
        "enabled": false,
        "rotateX": 0,
        "rotateY": 0,
        "rotateZ": 0,
        "translateX": 0,
        "translateY": 0,
        "translateZ": 0,
        "scale": 1
      }
    }
  },
  "appearance": {
    "border": {
      "enabled": false,
      "style": "solid",
      "colorLight": "",
      "colorDark": ""
    },
    "shadow": {
      "enabled": false,
      "valueLight": "",
      "valueDark": ""
    }
  },
  "name": "Modal",
  "ariaLabel": "",
  "overlay": {
    "dismissOnBackdrop": true
  },
  "animation": {
    "enabled": true,
    "openAnimationType": "fadeScale",
    "openAnimationDurationMs": 220,
    "closeAnimationType": "fadeScale",
    "closeAnimationDurationMs": 180
  },
  "panel": {
    "enabled": false,
    "panelBackdropBlurPx": 15,
    "panelBackdropGrayscale": 0
  }
}

</details>