WEBRAD / TECHNICAL REFERENCE

Popup

Modal or non-modal browser dialog.

WebPopupNonvisualVisual4 events

Quick start

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

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

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 · SpacingOuter spacing on all four sides, in pixels. Row and column layouts include this spacing between components.	`number`	`0`	margin
`marginTop`Margin top · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginTop
`marginRight`Margin right · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginRight
`marginBottom`Margin bottom · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginBottom
`marginLeft`Margin left · SpacingOuter 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 · BehaviorPreserves 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	`enumfixed` `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	`enumstart` `center` `end` `space-between` `space-around`	`"start"`	Inspector / configuration
`containerAlignItems`Default alignment · Children layoutDefault cross-axis alignment for children. Each child can override it with Item alignment.	`enumstart` `center` `end` `stretch`	`"start"`	Inspector / configuration
`modal`Modal · BehaviorWhen opened, prevents interaction with the page while the popup is visible.	`boolean`	`true`	modal
`currentRowBindings`Current row · DataBind 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

show(): void;

Example

Popup1.show();

`hide`

method

hide(): void;

Example

Popup1.hide();

`close`

method

close(returnValue?: string): void;

Example

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

focus(options?: FocusOptions): void;

`bindEvent`

method

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

`emit`

method

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

`dispose`

method

dispose(): void;

Events

Link methods in Interaction. How to use events.

OnShow

Standard event (Event).

Signature and example

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

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

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

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);
  }
}