Accessible modal dialog with animated transitions, focus trapping, and keyboard (Escape) / click-away closing.
Use show_modal/1 and hide_modal/2 to open/close via JS commands.
Summary
Functions
Returns a JS command that hides the modal.
Attributes
id(:string) (required)show(:boolean) - Defaults tofalse.on_cancel(Phoenix.LiveView.JS) - Defaults to%Phoenix.LiveView.JS{ops: []}.size(:string) - Defaults to"md".backdrop_class(:string) - Classes for the fullscreen backdrop overlay. Defaults to"bg-gray-900/60 backdrop-blur-sm".body_class(:string) - Classes for the modal panel. Defaults to"bg-white shadow-xl rounded-2xl".close_button(:boolean) - Defaults totrue.close_button_class(:string) - Colour classes for the close (×) button. Defaults to"text-gray-400 hover:text-gray-600".- Global attributes are accepted.
Slots
titleinner_block(required)footer
Returns a JS command that shows the modal.