Dialogs

DialogControl

A movable, resizable window with a default button, plus message boxes and prompts you can await.

Overview

DialogControl is a window: a title bar with a close icon, a body, an optional footer. It drags by its title bar, resizes from eight handles, and is modal (page dimmed and blocked) or non-modal (page stays live). Enter can fire a default button, Escape closes, and a right-click on the title bar opens a Win32-style system menu. CssClass="fx-dialog-classic" gives it the classic frame for migrated VB6 forms.

MessageBoxControl and InputDialogControl are built on it, and IDialogService wraps both so any component can await a confirm, alert or prompt in place of the browser's own.

Examples

#Non-modal window

IsModal="false" leaves the page live. Width, height and position bind two ways, so a drag or resize reports back. ShowWindowIcon adds the icon that opens the system menu.

Example

Razor

480px × 240px, centred

#Message box, prompt and the dialog service

IDialogService replaces window.confirm, alert and prompt: inject it anywhere and await the answer. A page can also own a MessageBoxControl and call ShowAsync for an icon, the .NET look, or a confirmation checkbox.

Example

Razor

Documentation

DialogControl parameters

Parameter	Type	Default	Description
`Visible`	`bool`	`false`	Shown or not. Two-way with `@bind-Visible`; closing sets it false.
`Header`	`string?`	`null`	Title-bar text; also the accessible name.
`ChildContent`	`RenderFragment?`	—	Body.
`FooterContent`	`RenderFragment?`	`null`	Footer, right-aligned flex row. Rendered only when set.
`Width / Height`	`string?`	`null`	CSS sizes. Two-way: a resize reports the new values through `WidthChanged` / `HeightChanged`.
`Position`	`DialogPosition?`	`null`	Offset from centre after a drag. Two-way with `@bind-Position`.
`IsModal`	`bool`	`true`	true dims and blocks the page; false leaves it live.
`ShowCloseIcon`	`bool`	`true`	The ✕ in the title bar.
`CloseOnEscape`	`bool`	`true`	Escape requests close.
`OnEscape`	`EventCallback`	—	When set, Escape runs this instead of closing. For dialogs whose close commits.
`OnEnter`	`EventCallback`	—	Default button. A plain Enter anywhere in the dialog runs it after the focused control has handled the key; buttons, links, editors, grids and open dropdowns keep Enter.
`CloseOnCtrlEnter`	`bool`	`false`	Ctrl+Enter requests close.
`CloseOnOverlayClick`	`bool`	`false`	A click on the dimmed backdrop requests close.
`OnClose / Closed`	`EventCallback`	—	Both run on every close request (✕, Escape, Alt+F4, system menu), in that order, then `Visible` goes false.
`Draggable`	`bool`	`true`	Title bar drags the window.
`Resizable`	`bool`	`true`	Eight resize handles.
`MinResizeWidth / MinResizeHeight`	`double`	`320 / 160`	Resize floor in pixels.
`MaxResizeWidth / MaxResizeHeight`	`double`	`0`	Resize ceiling in pixels; 0 means none.
`ShowSystemMenu`	`bool`	`true`	Right-click on the title bar opens the Move / Close menu.
`ShowWindowIcon`	`bool`	`false`	Icon at the left of the title bar that opens the same menu.
`AutoFocus`	`bool`	`true`	Focus the first focusable control on open.
`AriaLabel / AriaDescribedBy`	`string?`	`null`	Accessible name when there is no header; id of a description.
`CssClass`	`string?`	`null`	Extra classes on the window; `fx-dialog-classic` switches the frame.

IDialogService

Method	Inputs	Returns	Description
`ConfirmAsync()`	`message title`	`Task<bool>`	Yes / No box; true for Yes.
`ConfirmCancelAsync()`	`message title`	`Task<MessageBoxResult>`	Yes / No / Cancel box.
`AlertAsync()`	`message title`	`Task`	OK box.
`PromptAsync()`	`message title defaultValue`	`Task<string?>`	Single-line input; null when cancelled.
`()`	`setup`		Register `DialogService` and `IDialogService` as scoped; render one `DialogHostControl` in the layout. Without a host the calls return false, Cancel or null.

MessageBoxControl parameters

Parameter	Type	Default	Description
`Visible`	`bool`	`false`	Two-way; `ShowAsync` sets it for you.
`Title / Message`	`string`	`"Message" / null`	Title bar and body text.
`Buttons`	`MessageBoxButtons`	`Ok`	Which buttons to show.
`IconCss`	`string?`	`null`	Keyword `warning`, `info`, `error`, `question` or `none`; any other value is used as a CSS class. The VB6 look shows the question icon by default on boxes with more than OK.
`Look`	`MessageBoxLook`	`VB6`	`VB6` classic frame or `DotNet`.
`RequiredConfirmationText`	`string?`	`null`	Adds a checkbox with this label; the primary button stays disabled until it is ticked.
`Draggable`	`bool`	`true`	Title bar drags the box.
`CloseOnOverlayClick`	`bool`	`false`	Backdrop click closes.
`OnResult`	`EventCallback<MessageBoxResult>`	—	Fires with the chosen button.
`CssClass`	`string?`	`null`	Extra classes on the box.

InputDialogControl parameters

Parameter	Type	Default	Description
`Visible`	`bool`	`false`	Two-way; `ShowAsync` sets it for you.
`Title / Prompt`	`string`	`"Input" / null`	Title bar and the label above the box.
`InputValue`	`string`	`""`	Current text.
`Placeholder / InputType / MaxLength`	`string`	`null / "text" / 256`	Passed to the text box.
`OnResult`	`EventCallback<string?>`	—	Fires with the text, or null on cancel.
`CssClass`	`string?`	`null`	Extra classes on the dialog.

Methods

Method	Inputs	Returns	Description
`MessageBoxControl.ShowAsync()`	`message title buttons icon look requiredConfirmationText`	`Task<MessageBoxResult>`	Shows the box and completes with the chosen button. All but message optional; `icon` takes the same keywords as `IconCss`.
`InputDialogControl.ShowAsync()`	`prompt title defaultValue`	`Task<string?>`	Shows the prompt; null when cancelled.
`MultiLineEditControl.ShowAsync()`	`initial title maxLength prompt`	`Task<string?>`	Multi-line text prompt; null when cancelled.
`DefaultButtonScope.ConsumeEnter()`	—	`void`	Cascaded by a dialog with `OnEnter`. A control calls it to keep one Enter for itself.
`DefaultButtonScope.Defer()`	`task`	`void`	The default button waits for this task before deciding.

Enums: MessageBoxButtons Ok, OkCancel, YesNo, YesNoCancel · MessageBoxResult Ok, Cancel, Yes, No · MessageBoxLook VB6, DotNet · DialogPosition(X, Y) is the offset from centre in CSS pixels.

CSS classes

Class	Effect
`fx-dialog-overlay · .fx-dialog-overlay-nonmodal`	Fixed full-screen layer, 35% black and centred; non-modal makes it transparent and lets clicks through.
`fx-dialog · .fx-dialog-classic`	The window: white, rounded, shadow, 320px minimum, 90vw / 90vh maximum. Classic: grey, square 28px title bar, MS Sans Serif.
`fx-dialog-header · fx-dialog-title · fx-dialog-close · fx-dialog-window-icon`	Title bar parts. The ✕ turns red on hover.
`fx-dialog-body · fx-dialog-footer`	Body with 16px padding; footer with a top border, right-aligned.
`fx-dialog-btn`	Footer button styling that any button can take.
`fx-dialog-resize-n … fx-dialog-resize-nw`	The eight invisible resize handles.
`fx-dialog-system-menu`	The Win32-style menu.
`fx-msgbox · .fx-msgbox-vb6 · .fx-msgbox-dotnet`	Message box frame in each look.

CSS variables

Variable	Fallback	Purpose
`--fx-dialog-bg`	`#fff`	Window, body and footer background.
`--fx-border-radius`	`8px`	Corner radius.
`--fx-dialog-border / --fx-dialog-border-color`	`none`	Window border.
`--fx-dialog-shadow`	`0 6px 24px rgba(0,0,0,.2)`	Window shadow.
`--fx-dialog-header-bg / --fx-dialog-header-color`	`transparent / inherit`	Title bar.
`--fx-border-color`	`#e0e0e0`	Header and footer dividers.
`--fx-text-color`	`inherit`	Body text.
`--fx-zoom`	`1`	Scales the classic frame, close icon and system menu.

Keyboard and accessibility

The dialog has role="dialog", aria-modal when modal, and is labelled by Header or AriaLabel; AriaDescribedBy points at a description.
AutoFocus moves focus to the first focusable control on open; focus returns to the opener on close.
Escape closes, or runs OnEscape when set. Alt+F4 closes. Ctrl+Enter closes when CloseOnCtrlEnter is on. Enter fires OnEnter unless the focused control keeps the key.
The system menu (right-click on the title bar, or the window icon) offers Move and Close; Restore, Size, Minimize and Maximize are listed but disabled.
Message box: Escape closes, Enter picks the default button, Arrow keys and Tab move between the buttons.
The dialog imports the library's own dialog-control.js for focus capture and restore, Escape and Ctrl+Enter capture, and size measurement. No third-party script.