Modal

The dialog is a card, and a direct header or footer becomes a band. Open it with a button that has command="show-modal", and close it with command="close". Esc closes it too, and closedby="any" adds a click outside, where the browser supports it. No script is needed.

.close on a button in the header draws an X at the end. A link with rel="prev" gets the same look, for a modal that has its own URL.

Return a value

Buttons in a <form method="dialog"> close the dialog and set its returnValue to the button value.

From a script

Browsers without invoker commands ignore command. To support them, call the dialog methods from a script.

const dialog = document.getElementById("modal-example");
dialog.showModal();
dialog.close();

Related

A drawer is a modal that slides in from an edge.

Variables