alder-ui demos

al-dialog

A modal dialog around a native <dialog> that you write: Alder's renderer writes it for you (heading, close button and all), other stacks write it by hand, as here. Opened by commandfor / command="show-modal" on a button. The no-JS form comes first.

Without JavaScript

A link to the dialog's id shows it (:target); the close link # hides it. No script, no invoker commands.

Open (link)

About

Shown by the URL fragment alone.

Sizes

Small

Escape or a backdrop click closes it.

Medium

The default size.

Large

Room for a form or a table.

Dismissible, with actions

The shape Alder emits for dismissible: the close form first, the heading <h2 slot="header"> with an id the dialog's aria-labelledby names, then a slot="description" line in muted text.

Delete this post?

This cannot be undone.

Title
Hello world
Author
Ada Lovelace