Renders a dialog modal.

Examples

<.modal id="confirm-modal">
  This is a modal
</.modal>

JS commands may be passed to the :on_cancel to configure the closing/cancel event, for example:

<.modal id="confirm" on_cancel={JS.navigate(~p"/posts")}>
  This is another modal
</.modal>

dialog with slots and actions:

<.modal id="confirm">
  <:modal_box class="w-11/12 max-w-5xl">
    Modal to confirm
    <.modal_action>
      <.button>Confirm</.button>
    </.modal_action>
  </:modal_box>
</.modal>

Attributes

• id (:string) (required)
• class (:string) - Defaults to nil.
• open (:boolean) - Defaults to false.
• show (:boolean) - Behaves like open attribute. This attribute exist to avoid compatibility issues with phoenix core components. Defaults to nil.
• closeable (:boolean) - Defaults to true.
• close_on_click_away (:boolean) - Defaults to false.
• on_cancel (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.
• Global attributes are accepted.

Slots

• modal_box - the slot for compacting the modal body. Accepts attributes:
  • class (:string)
  • content_class (:string)
• inner_block

Attributes

• class (:string) - Defaults to nil.

Slots

• inner_block

Attributes

• modal_id (:string) (required)
• class (:string) - Defaults to nil.
• content_class (:string) - Defaults to nil.
• closeable (:boolean) - Defaults to true.
• close_on_click_away (:boolean) - Defaults to false.
• Global attributes are accepted.

Slots

• inner_block
• actions - the slot for showing modal actions.