Modal

Centered, borderless native dialog with staged wash/content motion and native focus containment.

Basic structure

dialog.modal > div.modal-header + div.content

Try it

HTML

<button class="button is-primary" type="button" data-modal="example-dialog">Open dialog</button><dialog class="modal" id="example-dialog" aria-labelledby="dialog-title"><div class="modal-header"><h2 class="like-h3" id="dialog-title">Example dialog</h2><button class="delete" type="button" data-close-modal aria-label="Close dialog">×</button></div><div class="content"><p>The backdrop and dialog use separate entry and exit timing.</p><div class="field"><input class="input" id="dialog-name" placeholder=" "><label class="label" for="dialog-name">Your name</label></div><button class="button is-primary" type="button" data-close-modal>Done</button></div></dialog>

Options

Class or attribute	What it does
`data-modal`	Opening button points to the dialog ID.
`data-close-modal`	Close actions, including the top-right Delete control.
`aria-labelledby`	Dialog title association.
`escape / backdrop`	Animated dismissal and native focus return.