Skip to content

Alpine.js Toolkit

@ailuracode · Interactive plugin demos

Dialog

Accessible modal state with focus trap, scroll-lock hooks, and ARIA helpers.

Store$store.dialog
Read Documentation@ailuracode/alpine-dialog
Dialog$store.dialog
Accessible modal state with focus trap, scroll-lock hooks, and ARIA helpers.

Basic modal

Open state:

Keyboard & accessibility

  • Escape closes when closeOnEscape is enabled
  • Scroll lock wired in the demo via onOpen/onClose + $store.scroll
  • The unlock is deferred 200ms to wait for the leave transition
  • dialogProps() sets role="dialog", aria-modal, labelled/describedby

Snippet

$store.dialog.open('settings')
$store.dialog.close('settings')
$store.dialog.dialogProps('settings')

Package: @ailuracode/alpine-dialog