An Ode to <dialog>

The <dialog> element solves basically every problem you have ever had with using a modal library for your web app.

Seriously; click and see for yourself. There is barely any CSS or JS at work here. There are no z-index issues, it doesn't need to be "teleported" to the <body>; it just works.

You should rip out whatever modal library you are using in your web app and replace it with a dialog-based one. (It pairs beautifully with a Vue SFC and slots!) Fully supported in Webkit, Firefox, and Safari >= 15.4.

To learn more, pretend it is 1997 and view this page's source!

Modal Title Goes Here

Modal content! The modal will automatically grow to no more than 80% of the viewport, then line wrap. If you want a narrower modal, stick a <div> here and assign a width.

There are many ways to dismiss the modal: clicking the backdrop, pressing the ESCAPE key, or clicking any button.