Dialog

As defined by the W3C:

A dialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close.

Like non-modal dialogs, modal dialogs contain their tab sequence. That is, Tab and Shift + Tab do not move focus outside the dialog. However, unlike most non-modal dialogs, modal dialogs do not provide means for moving keyboard focus outside the dialog window without closing the dialog.

fluent-dialog

Setup

import {
    provideFluentDesignSystem,
    fluentDialog
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentDialog()
    );

Example

FluentDialog

<FluentDialog> wraps the <fluent-dialog> element, a web component implementation of a dialog leveraging the Fluent UI design system.

Usage

@using Microsoft.Fast.Components.FluentUI
<FluentDialog @ref="MyFluentDialog" id="foo" aria-label="Simple dialog" Modal="true">
    <h2>Dialog referenced to object</h2>
    <button @onclick="OnCloseModalRefButtonClick">Close dialog with component object function</button>
</FluentDialog>

<FluentDialog Hidden="ModalHidden" id="foo" aria-label="Simple dialog" Modal="true">
    <h2>Dialog referenced with variable</h2>
    <button @onclick="OnCloseModalParameterButtonClick">Close dialog updating the variable</button>
</FluentDialog>

<p>MyFluentDialog.Hidden value: @MyFluentDialog?.Hidden</p>
<p>ModalHidden value: @ModalHidden</p>

<button @onclick="OnOpenModalRefButtonClick">Open dialog with ref</button>
<button @onclick="OnOpenModalParameterButtonClick">Open dialog with variable</button>

@code{
    private FluentDialog? MyFluentDialog;
    public bool ModalHidden { get; set; } = true;

    private void OnOpenModalRefButtonClick() => MyFluentDialog!.Show();
    private void OnCloseModalRefButtonClick() => MyFluentDialog!.Hide();

    private void OnOpenModalParameterButtonClick() => ModalHidden = false;
    private void OnCloseModalParameterButtonClick() => ModalHidden = true;
}

Example

See the component in action with implementation examples at the Blazor demo site.