This is the general dialog, and it is light-dismissible on purpose - close
button, backdrop click, Escape. When the user must actually answer, and
walking away would leave it ambiguous what happened, reach for
PetalComponents.AlertDialog.alert_dialog/1 instead: it asks one question
with two answers and ignores backdrop clicks.
The :footer slot is the action row the modal owns. Pass it and the
buttons sit in a banded strip pinned to the bottom of the box while the
content scrolls under them - the same band the table's tfoot wears. Omit
it and the modal renders exactly what it always did.
Summary
Functions
Attributes
id(:string) - modal id. Defaults to"modal".hide(:boolean) - modal is hidden. Defaults tofalse.title(:string) - modal title. Defaults tonil.class(:any) - modal class. Defaults tonil.close_modal_target(:string) - close_modal_target allows you to target a specific live component for the close event to go to. eg: close_modal_target={@myself}. Defaults tonil.close_on_click_away(:boolean) - whether the modal should close when a user clicks away. Defaults totrue.close_on_escape(:boolean) - whether the modal should close when a user hits escape. Defaults totrue.hide_close_button(:boolean) - whether or not the modal should have a close button in the header. Defaults tofalse.hide_header(:boolean) - visually hides the header bar (screen-reader-only, not removed) for confirmation-style modals that carry their heading in the content. Pass a real title anyway - it stays in the DOM as the dialog's accessible name via aria-labelledby. Implies no close button, so give the content its own way to close. Defaults tofalse.on_open(Phoenix.LiveView.JS) - additional JS commands to run when the modal opens. Defaults to%Phoenix.LiveView.JS{ops: []}.on_cancel(Phoenix.LiveView.JS) - a JS function to execute when the modal is closed. Defaults to pushing close_modal event. Defaults to%Phoenix.LiveView.JS{ops: [["exec", %{attr: "data-cancel-default"}]]}.max_width(:string) - modal max width. Defaults to"md". Must be one of"sm","md","lg","xl","2xl", or"full".- Global attributes are accepted.
Slots
inner_blockfooter- the action row the modal owns: pinned below the content, which scrolls under it, and wearing the same band the table's tfoot and the alert dialog's footer wear. Buttons stack on mobile and unstack to a right-aligned row at sm. Omit it and nothing renders - put the buttons in the content the way you always did.