# Dialogs The browser's own modal ``: opened by a command, the page behind it inert and dimmed, closed by its buttons, `Esc` or a click outside. And `REDZ.ui.confirm()` for a question asked from script. ## Examples A button opens the dialog with `commandfor` + `command="show-modal"`; buttons inside close it with `command="close"`. `closedby="any"` lets a click outside close it too. The focus goes into the dialog - to the control marked `autofocus` - and back to the button when it closes. ```html

A note for the guides

 ``` A product tints the head of every dialog with `--redz-dialog-header-bg`; `--redz-dialog-header-end` gives it room below and `--redz-dialog-header-line` a line under it. ### Sizes `dialog-sm` for a question, the default for a form, `dialog-lg` for a wide table or a preview. A dialog is a region, so the width prefixes inside it measure the dialog: `sm:` fires in the default one, and `md:` in `dialog-lg`, 800 px wide. ```html

Publish now?

The page goes live on three sites.

History of changes

Edited yesterday by M. K.; published on three sites; the Thai translation updated today.

 ``` ### A confirmation from script `await REDZ.ui.confirm({title, text, ok, tone})` builds an `alertdialog`, waits for the answer and removes it: `true` for the confirming button, `false` for Cancel, `Esc` or a click outside. The focus starts on Cancel; the button words come from the caller or the page's texts. ```html ``` For what cannot be undone, `phrase` asks the person to type a word first - the site's name, say: a field under the text, labelled by the page's text `confirm.phrase`, takes the focus, the confirming button waits until the words match, and `Enter` in the field confirms then. ```html ``` What a deletion takes with it is said by `note` and `sections`: `note: {tone, text}` is an alert under the text - `warning` by default, `danger`, `info` or `success` - and each of `sections: [{title, items}]` a title over a list, such as what goes and what stays. Every word is text, never HTML. ```html ``` ```js await REDZ.ui.confirm({ title: 'Delete the project Riverside tower?', note: {tone: 'danger', text: 'This cannot be undone.'}, sections: [ {title: 'Will be deleted:', items: ['128 tasks', '342 files', '1,204 log entries']}, {title: 'Kept:', items: ['The audit history']}, ], ok: 'Delete', tone: 'danger', phrase: 'Riverside tower', }); ``` ### A question for one value `await REDZ.ui.prompt({title, text, label, value, placeholder, type, inputmode, pattern, required, ok, cancel, tone})` asks for one value in a modal dialog and answers it, or `null` for Cancel and `Esc`. The field takes the focus with its text selected; `Enter` answers once the field is valid - `required`, `pattern` and `type` are held by the browser's own checks. The field is labelled by `label`, or the title; the buttons' words come from the caller or the page's texts. ```html ``` ```js const name = await REDZ.ui.prompt({title: 'Rename the folder', label: 'Name', value: 'Tours 2026', required: true, ok: 'Rename'}); if (name !== null) { // send it } ``` ### On a phone and full screen On any window a long dialog keeps its header and its footer in view: only `dialog-body` scrolls between them. A `
` may hold all three - `` right inside the dialog, its submit buttons in the footer - and the body still scrolls alone. On a window narrower than 576 px a dialog fills the screen by itself, while `dialog-sm` and a confirmation stay a card in the middle. `dialog-fullscreen` fills the screen on any window. ```html

Route of the day

Pick-up at the hotel at 7:30, the pier at 8:15, North Bay at 9:30; snorkeling, the emerald lake, lunch on the boat, back by 17:00.

 ``` ## Keyboard and accessibility - `Tab` stays inside an open dialog; `Esc` closes it; the focus goes back to the button that opened it. - The dialog is named by its title through `aria-labelledby`. A question that must be answered is `role="alertdialog"` with its focus on the safe answer. - The page behind does not scroll while a dialog is open, and keeps its width: the scrollbar's place stays. - A notice raised while a dialog is open shows inside the dialog, since everything outside it is inert. - Where the browser lacks invoker commands (below Chrome 135, Firefox 144, Safari 26.2) or `closedby` (below Chrome 134, Firefox 141, and in Safari), the library's script stands in. ## Tokens From [`css/components/dialog.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/dialog.css), which declares no custom property of its own. It reads the theme's `--redz-border`, `--redz-radius-16`, `--redz-bg-raised`, `--redz-shadow-3`, `--redz-space-12`, `--redz-space-16`, `--redz-space-24`, `--redz-dialog-header-end`, `--redz-dialog-header-line`, `--redz-dialog-header-bg`, `--redz-fs-16`, `--redz-text-muted`, `--redz-space-8`, `--redz-bg-page`, `--redz-ease`. ## From Bootstrap 5.3 | Bootstrap 5.3 | REDZ.UI | Change | Note | | --- | --- | --- | --- | | `modal` | `dialog` | rename | on a , opened by commandfor + command="show-modal" | | `modal-backdrop` | - | remove | the browser's ::backdrop | | `modal-body` | `dialog-body` | rename | | | `modal-content` | - | remove | no wrappers: the is the box | | `modal-dialog` | - | remove | no wrappers: the is the box | | `modal-dialog-centered` | - | remove | a dialog is centered | | `modal-dialog-scrollable` | - | remove | the dialog's body scrolls by itself | | `modal-footer` | `dialog-footer` | rename | | | `modal-fullscreen` | `dialog-fullscreen` | rename | | | `modal-header` | `dialog-header` | rename | | | `modal-static` | - | remove | closedby="closerequest" | | `modal-title` | `dialog-title` | rename | | | `data-bs-toggle="modal"` | `commandfor="ID" command="show-modal"` | trigger | on the button; the dialog is a | | `data-bs-dismiss="modal"` | `commandfor="ID" command="close"` | trigger | | | `data-bs-backdrop="static"` | `closedby="closerequest"` | trigger | Esc closes it, a click outside does not | | `data-bs-keyboard="false"` | `closedby="none"` | trigger | only its buttons close it | | `bootstrap.Modal` | `dialog.showModal() and dialog.close()` | trigger | | | `show.bs.modal` | `toggle` | review | the dialog's toggle event, or code right after showModal() | | `shown.bs.modal` | `toggle` | review | the dialog's toggle event, or code right after showModal() | | `hide.bs.modal` | `cancel` | review | the dialog's cancel event (Esc); your buttons close it | | `hidden.bs.modal` | `close` | rename | the dialog's close event; dialog.returnValue holds the closing button's value |