# `PetalComponents.Modal`
[🔗](https://github.com/petalframework/petal_components/blob/v3.2.0/lib/petal_components/modal.ex#L1)

# `hide_modal`

# `modal`

## Attributes

* `id` (`:string`) - modal id. Defaults to `"modal"`.
* `hide` (`:boolean`) - modal is hidden. Defaults to `false`.
* `title` (`:string`) - modal title. Defaults to `nil`.
* `class` (`:any`) - modal class. Defaults to `nil`.
* `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 to `nil`.
* `close_on_click_away` (`:boolean`) - whether the modal should close when a user clicks away. Defaults to `true`.
* `close_on_escape` (`:boolean`) - whether the modal should close when a user hits escape. Defaults to `true`.
* `hide_close_button` (`:boolean`) - whether or not the modal should have a close button in the header. Defaults to `false`.
* `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_block`

# `show_modal`

---

*Consult [api-reference.md](api-reference.md) for complete listing*