Modal
Focused overlay windows for important interactions.
Reset Password
Enter your email to reset your password.
<.button phx-click={Fluxon.open_dialog("basic-modal")}>
Open modal
</.button>
<.modal id="basic-modal">
<h3 class="text-lg font-semibold dark:text-zinc-100">A basic modal component</h3>
<p class="text-zinc-500 dark:text-zinc-400 mt-2">
This is an example of a basic modal component.
</p>
<div class="flex justify-end gap-4 mt-6">
<.button data-dialog-close>Cancel</.button>
<.button variant="solid" color="blue">Some action</.button>
</div>
</.modal>
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.
<.button phx-click={Fluxon.open_dialog("basic-modal")}>
Open modal
</.button>
<.modal
animation_enter="opacity-100 translate-y-0"
animation_leave="opacity-0 translate-y-20"
animation="transition duration-200"
id="basic-modal"
>
<h3 class="text-lg font-semibold dark:text-zinc-100">A basic modal component</h3>
<p class="text-zinc-500 dark:text-zinc-400 mt-2">
This is an example of a basic modal component with slide up animation.
</p>
<div class="flex justify-end gap-4 mt-6">
<.button data-dialog-close>Cancel</.button>
<.button variant="solid" color="blue">Some action</.button>
</div>
</.modal>
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.
<.button phx-click={Fluxon.open_dialog("modal-closing-esc")}>Disabled ESC</.button>
<.button phx-click={Fluxon.open_dialog("modal-closing-outside")}>Disabled Outside Click</.button>
<.button phx-click={Fluxon.open_dialog("modal-closing-prevent")}>Prevent All Closing</.button>
<.modal class="max-w-md" id="modal-closing-esc" close_on_esc={false}>
<h3 class="text-lg font-semibold dark:text-zinc-100">Disabled ESC</h3>
<p class="text-zinc-500 dark:text-zinc-400">
This is a modal with a disabled ESC key, so it won't be closed by pressing the ESC key.
</p>
</.modal>
<.modal class="max-w-md" id="modal-closing-outside" close_on_outside_click={false}>
<h3 class="text-lg font-semibold dark:text-zinc-100">Disabled Outside Click</h3>
<p class="text-zinc-500 dark:text-zinc-400">
This is a modal with a disabled outside click, so it won't be closed by clicking outside of it.
</p>
</.modal>
<.modal class="max-w-md" id="modal-closing-prevent" prevent_closing={true}>
<h3 class="text-lg font-semibold dark:text-zinc-100">Aha! You can't close me!</h3>
<p class="text-zinc-500 dark:text-zinc-400">
I'm sorry, you now have to refresh the page to close me.
</p>
</.modal>