Dialog

Dialog

A native modal <dialog>, opened and closed by buttons with commandfor and command. No script needed.

The markup: a dialog with a header, a div and a footer

The parts are direct children of <dialog>: <header> (title, description, close button), <div> (body) and <footer> (buttons). Tsugi wraps the parts in one child; Tsunami puts them straight in the dialog, or in a <form method="dialog">. Every part is optional.

Edit customer

Change the details, then save.

Buttons open and close it with commandfor and command

command="show-modal" matches Tsugi's data-dialog-open, and command="close" matches data-dialog-close. The button names the dialog's id in commandfor; the browser calls showModal() or close(). Esc closes it too.

Order #110963 note

Gift wrap, no receipt in the box.

A click on the backdrop closes it; closedby keeps it open

closedby="any": Escape and a click on the backdrop close it. No closedby: only Escape closes it (like Tsugi's data-dialog-static). closedby="none": only a button closes it. A browser without closedby support ignores it: Escape still closes the dialog.

Click outside to close

Escape or a click on the backdrop closes it.

Importing products

Only the button closes it.

Sizes: small, default, large and extra large

data-size on the dialog. On a narrow screen every size is the window less 1rem each side.

Small

24rem: a short confirmation or one field.

Default

32rem: a form.

Large

42rem: rows of fields, such as an address.

Extra large

56rem: a table or a preview.

A form with method="dialog" closes it, and the page reads returnValue

A submit button in a <form method="dialog"> closes the dialog without sending the form, and its value becomes returnValue. Read it in the close event. Escape leaves it empty. A close button with command="close" and a value sets it the same way.

Nothing chosen yet.

Cancel order #110963?

The customer is refunded and the items go back into stock.

A long section scrolls inside, and the header and footer stay

The panel is never taller than the window; the middle <div> scrolls on its own.

Order items

The 24 lines of order #110963.

Product SKU Qty
Bollard Lamp - Black LAMP-BLK 2
Magic Sheets - Twin SHEET-TWIN 1
Timeless Watch WATCH-01 1
Magic Pen PEN-01 4
Canvas Tote TOTE-01 1
Desk Mat MAT-01 2
Ceramic Mug MUG-01 6
Notebook Set NOTE-03 3
Wool Throw THROW-01 1
Brass Hook HOOK-02 8
Linen Apron APRON-01 1
Oak Tray TRAY-01 2
Bollard Lamp - White LAMP-WHT 2
Magic Sheets - Queen SHEET-QUEEN 1
Timeless Watch - Gold WATCH-02 1
Magic Pen - Red PEN-02 4
Canvas Tote - Large TOTE-02 1
Desk Mat - Grey MAT-02 2
Ceramic Mug - Blue MUG-02 6
Notebook Set - Lined NOTE-05 3
Wool Throw - Grey THROW-02 1
Brass Hook - Large HOOK-04 8
Linen Apron - Navy APRON-02 1
Oak Tray - Round TRAY-02 2

An alert dialog asks a question the user has to answer

role="alertdialog" on .dialog: no dividers and no close button. Use it to confirm something that cannot be undone. Leave closedby out so a stray click on the backdrop does not answer; Escape still cancels.

Delete this customer?

Their orders stay, but they can no longer sign in. This cannot be undone.

A figure in the header puts an icon beside the question

data-variant on <figure>: ok, danger, warning, info; without it the figure is gray. It works in any dialog header.

Delete Timeless Watch?

The product and its 3 variants are removed. Orders that hold it keep their lines.

data-size="sm" centres an alert dialog and gives the two buttons equal width

Sign out?

Unsaved changes on this page are lost.

API

Methods and properties (native)

Member Type Description
showModal() method Opens the dialog over the dimmed page; what command="show-modal" calls.
close(returnValue?) method Closes it; the optional string becomes returnValue. What command="close" calls.
requestClose(returnValue?) method Like Escape: fires cancel first, which can keep it open. command="request-close".
returnValue property The value from close(value) or from the value of the button that submits a method="dialog" form. Not reset on open: clear it yourself.
open property true while open. Do not set the open attribute by hand: that dialog is not modal.

Events (native)

Event Detail Description
close none After the dialog has closed, however it closed. Read returnValue here.
cancel none Before Escape (or a backdrop click) closes it; preventDefault() keeps it open.

Keyboard

Key Description
Esc Closes the dialog, unless closedby="none"; a popover open inside it closes first.
Tab Moves between the controls of the dialog only.
Enter In a field: submits the form, which closes the dialog when it has method="dialog".

Everything here is the browser's own dialog element; Tsunami adds only styles.

Attributes

Attribute / element Values Description
class="dialog" on <dialog> The component.
data-size sm (24rem), none (default, 32rem), lg (42rem), xl (56rem) Width; never wider than the window less 1rem each side.
role="alertdialog" on the dialog A question with answers; with data-size="sm" it is centred and its two buttons are equal width.
aria-labelledby id of the <h2> Names the dialog. Required.
aria-describedby id of the <p> Reads the line under the title as the description.
closedby any, closerequest (default for a modal), none any: Escape and a backdrop click; closerequest: Escape only; none: buttons only.
commandfor + command dialog id + show-modal, close, request-close On a button: opens or closes the dialog it names.
value text, on a close or submit button Becomes the dialog's returnValue.
autofocus on a control in the dialog The control that gets focus on open. Without it the first focusable control does.
> form[method=dialog] optional wrapper Wraps the parts; a submit closes the dialog.
> header h2, p, close button, figure The close button sits at the end of the first row.
> header > figure data-variant: none (gray, default), ok, danger, warning, info A round icon beside the title.
> div any content The body; scrolls when it is long.
> footer buttons Buttons at the end, main action last.