Modal Dialog

Modal dialogs use the native HTML <dialog> element which provides built-in accessibility features: focus trapping, escape key handling, and proper ARIA semantics. No JavaScript library required.

Key features:

• Native focus management and trapping
• Escape key closes dialog
• Built-in backdrop with ::backdrop
• Form integration with method="dialog"
• Return value for form submissions

A simple modal with header, body content, and action buttons.

A centered confirmation dialog for destructive actions. Uses method="dialog" for form submission.

A modal containing a form with inputs. Includes a close button in the header.

Base styles for the dialog element. Add to your project CSS.

• Opening: Use dialog.showModal() for modal behavior with backdrop
• Closing: Use dialog.close() or let users press Escape
• Return value: Use method="dialog" on forms to get the submit button's value
• Focus: First focusable element receives focus when opened
• Click outside: Add click listener on dialog to close when clicking backdrop
• Scrolling: For long content, add a scrollable class to the body section