---
title: Modal
description: 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)](/tr/design/shared-concepts/block-shell).

> Named overlay dialog with a single content slot. Nested FlexListBlock flexDirection/gap apply normally (panel is a flex column). ButtonBlock toggles it by stable Puck id (`modalId`); the Name field is an editor-only label and is not 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.

## Examples

**Newsletter modal**

```json
{
  "name": "Newsletter",
  "show": true,
  "content": [],
  "overlay": {
    "dismissOnBackdrop": true
  }
}
```

## 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
```

### `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.

```
animation: {
  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.

```
animation: {
  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.

```
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>

```json
{
  "name": "Modal",
  "overlay": {
    "dismissOnBackdrop": true
  },
  "animation": {
    "openAnimationEnabled": true,
    "openAnimationType": "fadeScale",
    "openAnimationDurationMs": 220,
    "closeAnimationEnabled": true,
    "closeAnimationType": "fadeScale",
    "closeAnimationDurationMs": 180
  },
  "panel": {
    "panelBackdropEnabled": false,
    "panelBackdropBlurPx": 15,
    "panelBackdropGrayscale": 0
  },
  "shell": {
    "customizeEnabled": false,
    "pointerEvents": "auto",
    "decorationBySelector": {},
    "visibility": {
      "showOnBreakpoints": {},
      "showOnLocales": {},
      "authVisibility": "all",
      "routeLockVisibility": "all",
      "roleVisibility": [],
      "entryActionVisibility": "all",
      "queryPageVisibility": "all",
      "hideWhenEmpty": ""
    },
    "anchor": {
      "anchorId": "",
      "anchorKey": ""
    },
    "box": {
      "padding": "none",
      "paddingEnabled": false,
      "marginsEnabled": false,
      "sizeByBreakpoint": {},
      "positionEnabled": false,
      "positionByBreakpoint": {}
    },
    "background": {
      "backgroundEnabled": false,
      "backgroundWidth": "page",
      "backgroundKind": "solid",
      "backgroundColorLight": "",
      "backgroundColorDark": "",
      "gradientType": "linear",
      "gradientAngle": 180,
      "gradientColors": [
        {
          "light": "",
          "dark": "",
          "offset": 50
        },
        {
          "light": "",
          "dark": "",
          "offset": 50
        }
      ],
      "gradientColor1Light": "",
      "gradientColor1Dark": "",
      "gradientColor2Light": "",
      "gradientColor2Dark": "",
      "backgroundImageSrc": "",
      "backgroundImageMode": "cover",
      "backgroundRepeatSize": 100,
      "backgroundPosition": "center",
      "backgroundMotionEnabled": false,
      "backgroundMotionDirectionDeg": 0,
      "backgroundMotionSpeed": 20,
      "backgroundMotionRotateDegPerSec": 0,
      "backgroundVideoSrc": "",
      "backgroundVideoFit": "cover",
      "backgroundVideoLoop": true,
      "backgroundVideoRepeatSize": 100,
      "backgroundAnimationMode": "particle",
      "backgroundAnimShape": "circle",
      "backgroundAnimSvgSrc": "",
      "backgroundAnimColorMode": "solid",
      "backgroundAnimColorLight": "#ffffff88",
      "backgroundAnimColorDark": "#ffffff66",
      "backgroundAnimSize": 12,
      "backgroundAnimJitter": 0.2,
      "backgroundParticleCount": 40,
      "backgroundParticleLifetimeSec": 4,
      "backgroundParticleSpeed": 40,
      "backgroundParticleAnimType": "fade",
      "backgroundParticleFromSide": "left",
      "backgroundParticleToSide": "right",
      "backgroundGridStyle": "cells",
      "backgroundGridMotionDirectionDeg": 0,
      "backgroundGridMotionSpeed": 0,
      "backgroundGridRotateDegPerSec": 0,
      "backgroundGridHoverGrowLimitPct": 50,
      "backgroundGridHoverRotateLimitDeg": 0,
      "backgroundGridReactionTimeSec": 1,
      "backgroundGridHoverGrow": true,
      "backgroundGridHoverRotate": false,
      "backgroundGridHoverColor": false,
      "backgroundGridHoverColorLight": "#ffffff55",
      "backgroundGridHoverColorDark": "#ffffff33",
      "backgroundGridReactionSpeed": 1,
      "backgroundBackdropEnabled": false,
      "backgroundBackdropBlurPx": 0,
      "backgroundBackdropBrightness": 1,
      "backgroundBackdropContrast": 1,
      "backgroundBackdropSaturate": 1,
      "backgroundBackdropGrayscale": 0,
      "backgroundBackdropSepia": 0,
      "backgroundBackdropHueRotateDeg": 0
    },
    "border": {
      "borderEnabled": false,
      "borderColorLight": "",
      "borderColorDark": "",
      "borderStyle": "solid"
    },
    "shadow": {
      "shadowEnabled": false,
      "shadowValueLight": "",
      "shadowValueDark": ""
    },
    "effects": {
      "effectsEnabled": false,
      "opacity": 1,
      "filterBlurPx": 0,
      "filterBrightness": 1,
      "filterContrast": 1,
      "filterSaturate": 1,
      "filterGrayscale": 0,
      "filterSepia": 0,
      "filterHueRotateDeg": 0,
      "filterDropShadowOffsetX": 0,
      "filterDropShadowOffsetY": 0,
      "filterDropShadowBlur": 0,
      "filterDropShadowColorLight": "",
      "filterDropShadowColorDark": "",
      "mixBlendMode": "normal"
    },
    "scrollAnimation": {
      "scrollAnimationEnabled": false,
      "scrollAnimationType": "fadeIn",
      "scrollAnimationDuration": 600,
      "scrollAnimationDelay": 0
    },
    "cursorTilt": {
      "cursorTiltEnabled": false,
      "cursorTiltIntensity": 12
    },
    "wander": {
      "wanderEnabled": false,
      "wanderSpeed": 40,
      "wanderJitter": 40,
      "wanderTurnRadius": 50,
      "wanderTurnSmoothness": 40,
      "wanderLimits": "parent"
    },
    "transform": {
      "transformEnabled": false,
      "transformRotateX": 0,
      "transformRotateY": 0,
      "transformRotateZ": 0,
      "transformTranslateX": 0,
      "transformTranslateY": 0,
      "transformTranslateZ": 0,
      "transformScale": 1
    }
  }
}
```

</details>