# Popup

Modal or non-modal browser dialog.

URL: https://webrad.atentor.com/docs/popup
Updated: 2026-11-07

WebPopup · Nonvisual · Visual · 4 events

## Quick start

Add **Popup1** in the Designer. Use the example in a page method.

```ts
Popup1.modal = true;
Popup1.show();
// In the confirmation button event:
// Popup1.close('confirmed');
// In OnClose, read Popup1.returnValue.
```

Edit content in the Designer tray. Use close(result) to return the decision and OnClose to receive it.

- Add dialog components in the Designer tray.
- modal = true blocks the page when opened with show(); false allows interaction outside the dialog.
- close('result') closes with a return value; hide() only closes.
- **OnShow** tracks opening; **OnHide** and **OnClose** track closing; **OnCancel** tracks Escape in a modal dialog.

## Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

| Property / source | Type and options | Default | Runtime access |
| --- | --- | --- | --- |
| `name` — Name · Identity | `string` | `—` | name |
| `margin` — Margin · Spacing — Outer spacing on all four sides, in pixels. Row and column layouts include this spacing between components. | `number` | `0` | margin |
| `marginTop` — Margin top · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginTop |
| `marginRight` — Margin right · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginRight |
| `marginBottom` — Margin bottom · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginBottom |
| `marginLeft` — Margin left · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginLeft |
| `width` — Width · Size & position | `number` | `360` | width |
| `height` — Height · Size & position | `number` | `200` | height |
| `visible` — Visible · Behavior | `boolean` | `true` | visible |
| `collapseWhenHidden` — Collapse when hidden · Behavior — Preserves the shared visibility contract; popup dialogs never participate in page layout. | `boolean` | `true` | collapseWhenHidden |
| `enabled` — Enabled · Behavior | `boolean` | `true` | enabled |
| `containerMode` — Container layout · Children layout | `enum` — `fixed` `align-to-parent` `row` `column` | `"fixed"` | Inspector / configuration |
| `containerPaddingTop` — Padding top · Children layout | `number` | `0` | Inspector / configuration |
| `containerPaddingRight` — Padding right · Children layout | `number` | `0` | Inspector / configuration |
| `containerPaddingBottom` — Padding bottom · Children layout | `number` | `0` | Inspector / configuration |
| `containerPaddingLeft` — Padding left · Children layout | `number` | `0` | Inspector / configuration |
| `containerGap` — Gap · Children layout | `number` | `0` | Inspector / configuration |
| `containerWrap` — Wrap · Children layout | `boolean` | `false` | Inspector / configuration |
| `containerJustifyContent` — Justify content · Children layout | `enum` — `start` `center` `end` `space-between` `space-around` | `"start"` | Inspector / configuration |
| `containerAlignItems` — Default alignment · Children layout — Default cross-axis alignment for children. Each child can override it with Item alignment. | `enum` — `start` `center` `end` `stretch` | `"start"` | Inspector / configuration |
| `modal` — Modal · Behavior — When opened, prevents interaction with the page while the popup is visible. | `boolean` | `true` | modal |
| `currentRowBindings` — Current row · Data — Bind writable visual values to fields of this repeated row. | `current-row-bindings` — Editor: current-row-bindings | `[]` | currentRowBindings |

## API in code

| Member | Signature | Access |
| --- | --- | --- |
| `modal` | `modal: boolean;` | Read and write |
| `open` | `readonly open: boolean;` | Read-only |
| `returnValue` | `returnValue: string;` | Read and write |

### `show`

method

```ts
show(): void;
```

Example

```ts
Popup1.show();
```

### `hide`

method

```ts
hide(): void;
```

Example

```ts
Popup1.hide();
```

### `close`

method

```ts
close(returnValue?: string): void;
```

Example

```ts
Popup1.close('confirmed');
```

Inherited members (25)

| Member | Signature | Access |
| --- | --- | --- |
| `currentRowBindings` | `currentRowBindings: readonly WebCurrentRowBinding[];` | Read and write |
| `element` | `readonly element: TElement;` | Read-only |
| `id` | `readonly id: string;` | Read-only |
| `name` | `readonly name: string;` | Read-only |
| `visible` | `visible: boolean;` | Read and write |
| `collapseWhenHidden` | `collapseWhenHidden: boolean;` | Read and write |
| `enabled` | `enabled: boolean;` | Read and write |
| `x` | `x: number;` | Read and write |
| `y` | `y: number;` | Read and write |
| `width` | `width: number;` | Read and write |
| `height` | `height: number;` | Read and write |
| `margin` — Outer spacing on all four sides, in pixels. | `margin: number;` | Read and write |
| `marginTop` | `marginTop: number;` | Read and write |
| `marginRight` | `marginRight: number;` | Read and write |
| `marginBottom` | `marginBottom: number;` | Read and write |
| `marginLeft` | `marginLeft: number;` | Read and write |
| `alignSelf` | `alignSelf: RuntimeLayoutAlignSelf;` | Read and write |
| `tabIndex` | `tabIndex: number;` | Read and write |
| `backgroundColor` | `backgroundColor: string;` | Read and write |
| `color` | `color: string;` | Read and write |
| `borderColor` | `borderColor: string;` | Read and write |

### `focus`

method

```ts
focus(options?: FocusOptions): void;
```

### `bindEvent`

method

```ts
bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;
```

### `emit`

method

```ts
emit(eventName: string, detail?: unknown): boolean;
```

### `dispose`

method

```ts
dispose(): void;
```

## Events

Link methods in **Interaction**. [How to use events](https://webrad.atentor.com/docs/interactions).

### OnShow

Standard event (Event).

Signature and example

```ts
import type { WebPopup } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Popup1Show(
    sender: WebPopup,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```

### OnHide

Standard event (Event).

Signature and example

```ts
import type { WebPopup } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Popup1Hide(
    sender: WebPopup,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```

### OnClose

Standard event (Event).

Signature and example

```ts
import type { WebPopup } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Popup1Close(
    sender: WebPopup,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```

### OnCancel

Standard event (Event).

Signature and example

```ts
import type { WebPopup } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Popup1Cancel(
    sender: WebPopup,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```