The dialog element is a useful element for representing any kind of dialog in HTML, find out how it works.
A modal dialog is a special type of pop-up box on a web page, that interrupts the user to focus onto itself. There are some valid use cases for popping up a dialog, but take great consideration should be made before doing so. Modal dialogs force users to focus on specific content, and, temporarily at least, ignore the rest of the page.
Dialogs can be either modal (only the content in the dialog can be interacted with) or non-modal (it's still possible to interact with content outside of the dialog). Modal dialogs are displayed on top of the rest of the page content. The rest of the page is inert and, by default, obscured by a semi-transparent backdrop.
The semantic HTML <dialog> element to create a dialog
comes with semantics, keyboard interactions, and all the properties and methods of the HTMLDialogElement interface.
Modal dialogs
Here is an example of a modal <dialog>. Open the dialog with the "Open modal dialog" button. Once opened, there are three ways to close the dialog: the escape key, submitting a form with
a button that has the formmethod="dialog"
set (or if the form itself has method="dialog" set), and the HTMLDialogElement.close() method.
The HTMLDialogElement has three main methods, along with all the methods inherited from HTMLElement.
dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close()