<dialog>
The <dialog> HTML element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow. It provides a native backdrop and handles focus-trapping out of the box when opened modal-style.
<!-- Button utilizing native command attributes to toggle dialog modal -->
<button commandfor="myDialog" command="show-modal">Open Modal</button>
<dialog id="myDialog">
<h2>Contact Form</h2>
<form method="dialog">
<label>Name</label><br>
<input type="text" required><br><br>
<label>Email</label><br>
<input type="email" required><br><br>
<button type="submit">Submit</button>
</form>
<br>
<button commandfor="myDialog" command="close">Close</button>
</dialog>