Overview
Generate a centered modal dialog for confirmation flows: a header with a close affordance, body copy explaining the request, and Cancel plus Confirm actions. The canvas previews the glass-styled dialog, and the export box provides the markup in HTML, Tailwind, and React flavors.
How It Works
The canvas shows the worked example: an authorization dialog with a title, an explanatory paragraph, a close cross, and two action buttons, rendered as a glass card over a dark backdrop. Below, the export box presents the dialog markup in three tabs. Copy the HTML and CSS tab for the complete structure, or begin from the abbreviated Tailwind and React scaffolds.
Step-by-Step Usage Guide
- Review the dialog example on the canvas, including the cancel and confirm actions.
- Copy the HTML and CSS tab for the complete markup structure.
- Add role, aria attributes, focus trapping, and Escape handling in your application.
- Style the backdrop and open-close transitions yourself, or adopt a dialog library.
Technical Specifications & Standards
The HTML and CSS tab emits the dialog structure: a backdrop container, a card with header, body, and an actions row holding cancel and confirm buttons. Two things to know before shipping it. First, despite the accessibility-flavored comment in the markup, the export contains no accessibility plumbing: there is no role, no aria-modal, no labelled relationship between title and dialog, and no focus trap or Escape handling, so a production modal needs all of those added, ideally by using the native dialog element or an accessibility-focused library as the container. Second, the exported markup carries class names without a stylesheet; the styling shown on the canvas comes from Tailwind-style utilities applied in the preview, so the class names in the export need either your own CSS or the utility classes from the preview wired up. The backdrop, positioning, and open-close animation are likewise not in the export: the template is the dialog content, and layering behavior belongs to your application. The close affordance is a plain cross character, not an icon.
Targeted Use Cases
- Starting a confirmation dialog for destructive actions like deletions.
- Drafting a permission-request dialog for an internal tool.
- Prototyping a two-action modal during a design review.
- Standardizing dialog structure across a team's front-end code.
Notes & Gotchas
- Add the dialog role, aria-modal, and a labelled title; the template's comment overstates what it includes.
- Trap focus and close on Escape; the export has no such behavior.
- Style or wire the class names yourself; the export does not ship a stylesheet.
- Use a native dialog element or tested library as the container in production.
Frequently Asked Questions
Is the exported modal accessible as-is?
No. The markup calls itself accessible, but it lacks role and aria attributes, focus management, and keyboard dismissal. Add those, or render the content inside the native dialog element or an accessibility-tested library.
Why is there no CSS in my export?
The template ships structure and class names, not a stylesheet. The visual styling on the canvas comes from utility classes applied there; write the CSS or apply the utilities in your project.
Does the export include the backdrop and open animation?
No. It contains the dialog content only. Backdrop layering, positioning, and transitions are application concerns you add around the template.
Why is the close button a text cross?
The close affordance is a plain cross character for simplicity. Replace it with an inline SVG icon and an accessible name when you productionize the dialog.