Modal

Focused overlay windows for important interactions.

Sizes

Adjust modal widths to suit various content types and maintain readability.

<.button phx-click={Fluxon.open_dialog("modal-size-max-w-xl")}>Open modal</.button>
<.button phx-click={Fluxon.open_dialog("modal-size-400px")}>Open modal</.button>
<.button phx-click={Fluxon.open_dialog("modal-size-w-full")}>Open modal</.button>

<.modal id="modal-size-max-w-xl" class="max-w-xl w-full">
  <h3>A responsive max-width modal</h3>
  <.button phx-click={Fluxon.close_dialog("modal-size-max-w-xl")}>Cancel</.button>
</.modal>

<.modal id="modal-size-400px" class="w-[400px]">
  <h3>A fixed-width modal</h3>
  <.button phx-click={Fluxon.close_dialog("modal-size-400px")}>Cancel</.button>
</.modal>

<.modal id="modal-size-w-full" class="w-full">
  <h3>A full-width modal</h3>
  <.button phx-click={Fluxon.close_dialog("modal-size-w-full")}>Cancel</.button>
</.modal>

Animation

Apply custom animations for modal entry and exit to enhance user experience.

<div>
  <.modal id="modal-default" />
</div>

Custom backdrop

Tailor the modal backdrop to create desired focus and visual hierarchy.

<.button phx-click={Fluxon.open_dialog("backdrop-frosted-glass")}>Frosted Glass</.button>
<.button phx-click={Fluxon.open_dialog("backdrop-blackout")}>Blackout</.button>
<.button phx-click={Fluxon.open_dialog("backdrop-subtle-transparency")}>Light Dimming</.button>
<.button phx-click={Fluxon.open_dialog("backdrop-blue")}>Blue Opacity</.button>

<.modal id="backdrop-frosted-glass" class="max-w-lg" backdrop_class="bg-black bg-opacity-10 backdrop-blur-lg">
  <p>Frosted Glass</p>
</.modal>

<.modal id="backdrop-blackout" class="max-w-lg" backdrop_class="bg-black">
  <p>Blackout</p>
</.modal>

<.modal id="backdrop-subtle-transparency" class="max-w-lg" backdrop_class="bg-black bg-opacity-20">
  <p>Light Dimming</p>
</.modal>

<.modal id="backdrop-blue" class="max-w-lg" backdrop_class="bg-blue-950 bg-opacity-90 backdrop-blur-sm">
  <p>Blue Opacity</p>
</.modal>

Placement

Position modals in various screen locations to suit different use cases.

<.button phx-click={Fluxon.open_dialog("modal-placement-top")}>Top</.button>

<.modal
  id="modal-placement-top"
  class="max-w-3xl"
  placement="top"
  animation_enter="opacity-100 translate-y-0"
  animation_leave="opacity-0 translate-y-10"
>
  <h3 class="text-lg font-semibold dark:text-zinc-100">Top</h3>
  <p>This is a modal with a top placement.</p>
</.modal>

<!--
  Available placements:

  top, bottom, left, right,
  full-left, full-right,
  full-top, full-bottom
-->

Closing behaviour

Customize how modals close to meet specific interaction requirements.

<div>
  <.modal id="modal-default" />
</div>

LiveView integration

Control modals server-side for seamless Phoenix LiveView integration.

<.button phx-click="open-modal">Open Server-Controlled Modal</.button>

<.modal class="max-w-md" id="live-view-state" prevent_closing={true} open={@open}>
  <h3>Server-Controlled Modal</h3>
</.modal>

<%!--
def handle_event("open-modal", _, socket) do
  {:noreply, socket |> assign(open: true)}
end

def handle_event("close-modal", _, socket) do
  {:noreply, socket |> assign(open: false)}
end
--%>

Stacked modals

Support multiple open modals with stacking for complex workflows.

What was I thinking when I decided stacked modals were a good idea?