The above example demonstrates how to create a modal dialog using the
The only difference between modal dialogs and normal ones (from a coding perspective) is that you use
showModal() instead of
The difference from a user's perspective is that, modal dialogs create a mode where the main window can't be used until the user has interacted with the dialog (i.e. closed it). Most browsers tint the background color to a darker shade, which draws attention to the dialog box.
Here's an example of a normal dialog (i.e. "non-modal").
<dialog> at the click of a button, and specifically, make the dialog modal.
You can (optionally) use the
open attribute to display the dialog automatically upon page load.