`dlg`

Modal dialog component for browser UI - build overlay-and-box dialog pairs via the dom module, show and hide them, register an on-close callback, close and remove from the DOM, plus quick-constructors for confirm (OK/Cancel) and alert dialogs.

Load with: use dlg

What this module does

dlg is a minimal browser modal dialog toolkit. Each dialog is a pair of DOM elements - a full-screen semi-transparent overlay and a centred white box - plus a state object that tracks visibility and an optional close callback. Clicking the overlay or the close button (×) dismisses the dialog and fires the callback.

Two convenience constructors cover the most common cases: a confirm dialog with OK/Cancel buttons and an alert with a single OK button. Both are mounted directly to document.body and shown immediately.

Quick example

use dlg

# Create a dialog with title and content
d = dlgne()
d = dlgmk(d, "Confirm Action", "Are you sure?")
d = dlgon(d, \() prn("dialog closed"))
d = dlgsh(d)  # show it

# Later
d = dlghi(d)  # hide without destroying
dlgcl(d)      # close and remove from DOM

# Quick confirm dialog (mounts itself)
dlgcf("Delete?", "This cannot be undone.", \() prn("confirmed"), \() prn("cancelled"))

# Quick alert
dlgal("Something went wrong!")

Functions

State

dlgne()

Creates a new empty dialog state: {ovr: nil, box: nil, oncls: nil, shw: fls}. ovr and box are the DOM elements created by dlgmk.

Building

dlgmk(state, title, content)

Creates the DOM elements for the dialog and attaches them to the state:

Overlay: fixed, full-screen, rgba(0,0,0,0.5) background, z-index 1000. Click closes the dialog.
Box: fixed, centred via CSS translate, white background, 20px padding, 8px border-radius, min-width 300px, z-index 1001. Clicks don't propagate to the overlay.
Optional <h2> title and a <div> content element.
A close button (×) in the top-right corner.

Elements start with display: none. Call dlgsh to show. Returns the updated state.

Visibility

dlgsh(state)

Shows the dialog by setting the overlay and box to display: block. Sets shw: tru.

dlghi(state)

Hides the dialog (sets both elements to display: none). Does not remove from DOM. Sets shw: fls.

Close and callbacks

dlgon(state, fn)

Registers a close callback. The function is called (with no arguments) when the dialog is closed via dlgcl.

dlgcl(state)

Hides the dialog, fires the close callback if set, and removes both DOM elements from the document. The state's ovr is set to nil.

Quick dialogs

dlgcf(title, message, on_ok, on_cancel)

Creates and immediately shows a confirm dialog with a message paragraph and OK/Cancel buttons. Clicking OK calls on_ok after closing; clicking Cancel calls on_cancel. Both buttons close the dialog first. The dialog is mounted to document.body.

dlgal(message)

Creates and immediately shows an alert dialog with a message paragraph and a single OK button. Mounted to document.body.

Notes

Requires the dom module and a browser-like host environment with a live DOM.
Styles are set inline - no external CSS required.