Dialogs - Fod.DemoPage

Current State

Display the current dialog stack status.

Open Dialogs

0

Dialog IDs

None

Basic Modal Dialog

Click to open a basic modal dialog with title, content, and close button. Modal dialogs trap focus and block interaction with background content.

Opens modal with backdrop

razor

@inject IDialogService DialogService

<FodButton OnClick="@OpenBasicDialog">Open Basic Dialog</FodButton>

@code {
    private void OpenBasicDialog()
    {
        DialogService.Show<BasicDialogContent>(new DialogOptions
        {
            Title = "Basic Dialog",
            CloseOnEsc = true,
            CloseOnBackdrop = true,
            ShowCloseButton = true
        });
    }
}

Dialog Options

Configure dialog behavior with CloseOnEsc and CloseOnBackdrop options.

Close on ESC Close on Backdrop Click Show Close Button

csharp

DialogService.Show<ConfigurableDialogContent>(new DialogOptions
{
    Title = "Configurable Dialog",
    CloseOnEsc = true,        // ESC key closes dialog
    CloseOnBackdrop = true,   // Backdrop click closes dialog
    ShowCloseButton = true    // X button shown in header
});

Stacked Dialogs

Multiple dialogs stack correctly with proper z-index ordering. Only the topmost modal traps focus and responds to ESC/backdrop clicks.

Opens first dialog with nested second

csharp

// First dialog can open a second dialog
DialogService.Show<StackedDialogContent1>(new DialogOptions
{
    Title = "First Dialog",
    CloseOnEsc = true,
    CloseOnBackdrop = true
});

// Inside StackedDialogContent1, open second dialog:
DialogService.Show<StackedDialogContent2>(new DialogOptions
{
    Title = "Second Dialog (Topmost)"
});

Dialog with Result

Dialogs can return results asynchronously. The ShowAsync method returns a Task of DialogResult.

csharp

var result = await DialogService.ShowAsync<ResultDialogContent>(new DialogOptions
{
    Title = "Dialog with Result",
    CloseOnEsc = false,
    CloseOnBackdrop = false,
    ShowCloseButton = false
});

if (result.Success)
{
    var data = result.Data; // User entered value
}

Non-Modal Dialog

Non-modal dialogs don't block interaction with background content and don't trap focus.

Background remains interactive

csharp

DialogService.Show<NonModalDialogContent>(new DialogOptions
{
    Title = "Non-Modal Dialog",
    Modal = false,              // Non-modal - no backdrop
    ShowCloseButton = true
});

Custom Width Dialog

Dialogs can have custom maximum widths using the MaxWidth option.

Small (400px)

Large (800px)

Extra Large (90vw)

csharp

DialogService.Show<CustomWidthDialogContent>(new DialogOptions
{
    Title = "Custom Width Dialog",
    MaxWidth = "800px",   // Any valid CSS width value
    ShowCloseButton = true
});

Usage

How to set up and use the Dialog Provider in your application.

1. Register Services

csharp

// Program.cs
builder.Services.AddFod();

2. Wrap App with FodProviders

razor

<FodProviders>
    <Router AppAssembly="@typeof(App).Assembly">
        ...
    </Router>
</FodProviders>

3. Inject IDialogService

razor

@inject IDialogService DialogService

// Open a dialog
var result = await DialogService.ShowAsync<MyDialogComponent>(new DialogOptions
{
    Title = "My Dialog",
    CloseOnEsc = true,
    CloseOnBackdrop = true
});

4. Dialog

razor

// MyDialogComponent.razor
[Parameter]
public DialogRef? DialogRef { get; set; }

<div>
    <p>Dialog content here</p>
    <button @onclick="@(() => DialogRef?.Close("success"))">OK</button>
    <button @onclick="@(() => DialogRef?.Cancel())">Cancel</button>
</div>

Accessibility Features

Dialogs provide WCAG 2.1 AA compliant accessibility features.

ARIA Attributes

role="dialog" - Identifies the element as a dialog to screen readers
aria-modal="true" - Indicates modal behavior (blocks background interaction)
aria-labelledby - Links dialog to its title element for screen reader announcement
aria-hidden="true" - Applied to background content when modal is open

Keyboard Navigation

ESC - Close dialog (if CloseOnEsc is enabled)
Tab - Move to next focusable element within dialog
Shift+Tab - Move to previous focusable element within dialog
Enter/Space - Activate focused button or link

API Reference

IDialogService methods and DialogOptions properties.

IDialogService Methods

No properties defined.

DialogOptions Properties

No properties defined.