Intermediate LevelHTML & Semantic Web
How does the native <dialog> element manage modal dialogs and backdrop overlays?
❓ Interview Prompt: Explain <dialog> tag, dialog.showModal() focus trapping, ::backdrop CSS pseudo-element, and closing dialogs.
The '<dialog>' element provides a native modal dialog box in HTML5:
•
'dialog.showModal()': Opens the dialog as a modal, placing it in the Top Layer, creating a native '::backdrop' overlay, and automatically trapping keyboard focus inside the dialog.
•
'dialog.show()': Opens as a non-modal dialog without backdrop or focus trap.
•
'dialog.close()': Closes the dialog and restores focus.
Code Implementation Example
html
<dialog id="confirm-modal">
<h2>Confirm Action</h2>
<p>Are you sure you want to proceed?</p>
<button onclick="document.getElementById('confirm-modal').close()">Cancel</button>
</dialog>
<button onclick="document.getElementById('confirm-modal').showModal()">Open Modal</button>💡Native HTML5 modal dialog implementation with showModal and close.
🎯 Interview Key Takeaway
Use <dialog> with showModal() for native focus trapping and backdrop overlays without external modal libraries.
#dialog#modal#showModal#Intermediate
Back to all HTML & Semantic Web Questions→