Generador de Modales con IA.

Create a modal dialog with three sizes — sm 400px, md 560px, lg 760px — centered over a black backdrop at 50 percent opacity, 16px radius, soft shadow. Compose it from Header, Body and Footer slots: the header holds a title and an icon-only close button with an aria-label, the body scrolls independently at max-height 70vh, and the footer right-aligns Cancel next to a primary action. On open, move focus to the first interactive element, trap Tab and Shift+Tab inside the dialog, and lock body scroll by compensating for the scrollbar width so the page does not shift. Set role="dialog", aria-modal="true" and aria-labelledby pointing at the title, and restore focus to the trigger on close.

Create a destructive confirmation dialog: a warning icon, a heading naming the exact resource, a body stating what will be lost and whether it is recoverable, and a footer with Cancel on the left and a red Confirm on the right. Ignore both Escape and backdrop clicks so the action requires a deliberate button press. Move initial focus to Cancel rather than Confirm, so a stray Enter keypress cancels instead of destroying. Use role="alertdialog" with aria-describedby on the body text. Add an optional type-to-confirm mode requiring the resource name to be typed before Confirm enables, with the comparison case-sensitive and trimmed.

Create a form dialog with a fixed header, a scrolling body and a sticky footer holding Cancel and Save. Keep the header and footer outside the scroll container so the actions stay reachable in a long form. Add a dirty-state guard: when any field has changed, intercept Escape and backdrop clicks and show a nested confirm-discard step inside the same dialog rather than opening a second overlay. On validation failure, move focus to the first invalid field and scroll it into view inside the body. Set aria-busy while saving, disable Save without removing it from the tab order, and close only after the request resolves.

Create a dialog that renders as a centered card above 640px and as a bottom sheet below it: full width, rounded top corners only, sliding up from the bottom edge with a 250ms ease-out transform. Add a drag handle at the top and support swipe-to-dismiss with a velocity threshold, falling back to the close button for keyboard and assistive technology. Cap the sheet height at 90vh with the body scrolling inside, and use dynamic viewport units so the mobile browser chrome does not clip the footer. Keep focus trapping and scroll lock identical in both layouts, and disable the slide animation under prefers-reduced-motion.

Create a modal built on the native HTML dialog element opened with showModal(), so the browser supplies focus trapping, Escape handling and top-layer stacking with no z-index management. Style the backdrop through the ::backdrop pseudo-element. Add the parts the platform does not give you: body scroll lock on open, an entry and exit animation using allow-discrete and the transition-behavior property, and a close-on-backdrop handler that compares the click target to the dialog element rather than its children. Listen for the close event to restore focus and read returnValue, and use autofocus on the element that should receive focus first.

Create a command palette dialog opened by Cmd+K or Ctrl+K: a search input at the top with results grouped by section below, positioned near the top of the viewport rather than vertically centered. Keep DOM focus in the input at all times and move the visual selection with aria-activedescendant so arrow keys navigate the list without stealing focus from typing. Support Enter to run the highlighted command, Escape to close with focus restored to the previously active element, and a scroll-into-view on the highlighted row. Debounce the query, render an empty state naming what was searched for, and announce the result count through a polite live region.