<dialog>

Example

Usage

<dialog>
  <p>This is a HTML-powered dialog box. Its open attribute is set.</p>
</dialog>

Description

Dialog boxes (sometimes referred to as "modals") are a common pattern on the web. They appear as an interactive container, typically in the centre of the page.

In HTML, the <dialog> is a container that appears separate from the rest of the page. It can have the open attribute, which determines whether that dialog box is open or not. These types of boxes cannot block the page underneath them.

<dialog> elements become more powerful when combined with JavaScript. The showModal method allows the content underneath it to be covered and force a response. This can be customised by styling the ::backdrop pseudo-element.

Forms within a <dialog> can have a method of dialog. Submitting the form closes the dialog and sets the returnValue property on the dialog element to the value submitted from the form.