Modal
Focused overlay windows for important interactions.
Reset Password
Enter your email to reset your password.
Sizes
Adjust modal widths to suit various content types and maintain readability.
A responsive max-width modal
This modal uses Tailwind's max-w-xl
and w-full
classes for a responsive design. It's full-width on small screens and capped at xl width on larger ones.
A fixed-width modal
This modal has a fixed width of 400px. Fixed widths ensure consistent layouts across screens.
A full-width modal
This full-width modal spans the entire screen, maximizing content visibility. It's ideal for displaying large amounts of information or complex layouts.
<.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.
Rotating? You must be kidding me!
This rotating modal animation is a wild ride that should never, ever see the light of day in a real-world app. Seriously, don't even think about it! It's just here to show off and make you dizzy. Use at your own risk of inducing vertigo in your users!
Slide up
This is a modal with a slide up animation.
Slide down
This is a modal with a slide down animation.
<div>
<.modal id="modal-default" />
</div>
Custom backdrop
Tailor the modal backdrop to create desired focus and visual hierarchy.
Frosted Glass
This is a modal with a frosted glass backdrop.
Blackout
This is a modal with a blackout backdrop.
Light Dimming
This is a modal with a light dimming backdrop.
Blue Opacity
This is a modal with a blue opacity backdrop.
<.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.
Top
This is a modal with a top placement.
Bottom
This is a modal with a bottom placement.
Left
This is a modal with a left placement.
Right
This is a modal with a right placement.
Full left
This is a modal with a full-left placement.
Full right
This is a modal with a full-right placement.
Full top
This is a modal with a full-top placement.
Full bottom
This is a modal with a full-bottom placement.
<.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.
Disabled ESC
This is a modal with a disabled ESC key, so it won't be closed by pressing the ESC key.
Disabled Outside Click
This is a modal with a disabled outside click, so it won't be closed by clicking outside of it.
Aha! You can't close me!
I'm sorry, you now have to refresh the page to close me.
<div>
<.modal id="modal-default" />
</div>
LiveView integration
Control modals server-side for seamless Phoenix LiveView integration.
Server-Controlled Modal
This modal demonstrates server-side control in LiveView. It can only be opened and closed through server-side actions.
Note: Clicking outside or pressing ESC won't close this modal. It's intentionally designed this way to showcase server-side control.
To close the modal, click here. This triggers a server-side event.
<.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.
First modal
This is the first modal.
Second modal
This is the second modal.
It's enough!
You've opened three modals now. It's enough!
What was I thinking when I decided stacked modals were a good idea?