Modal Dialog Structure
Build a centered modal with a backdrop overlay, scrollable content area, and close button using fixed positioning and z-index utilities.
What Is a Modal Dialog
A modal dialog is an overlay panel that appears on top of the page to capture the user's attention for a specific task — confirmation, a form, or detailed information — before returning them to the underlying page.
A modal consists of three parts: a backdrop overlay that dims the background, the dialog panel centered on screen, and a close mechanism (a button, Escape key, or backdrop click). All three must work together for a polished, accessible component.
Full-Screen Backdrop Overlay
The backdrop dims the page content behind the modal, focusing the user's attention on the dialog. Use fixed inset-0 bg-black/50 z-40 to cover the entire viewport with a 50% opaque black layer.
The backdrop should be a separate element from the dialog panel so you can independently animate them. Clicking the backdrop should close the modal — this is achieved with a JavaScript click handler on the backdrop element.
<div
id="modal-backdrop"
class="fixed inset-0 bg-black/50 z-40"
onclick="closeModal()">
</div>All lessons in this course
- Modal Dialog Structure
- Modal Open and Close Animation
- Dropdown Menu Component
- Accessible Modals and Dropdowns