Display content in a layer above the main page. Ideal for confirmations, alerts, and forms.
<flux:modal.trigger name="edit-profile"> <flux:button>Edit profile</flux:button></flux:modal.trigger><flux:modal name="edit-profile" class="md:w-96 space-y-6"> <div> <flux:heading size="lg">Update profile</flux:heading> <flux:subheading>Make changes to your personal details.</flux:subheading> </div> <flux:input label="Name" placeholder="Your name" /> <flux:input label="Date of birth" type="date" /> <div class="flex"> <flux:spacer /> <flux:button type="submit" variant="primary">Save changes</flux:button> </div></flux:modal>If you are placing modals inside a loop, ensure that you are dynamically generating unique modal names. Otherwise, one modal trigger, will trigger all modals of that name on the page causing unexpected behavior.
@foreach ($users as $user) <flux:modal :name="'edit-profile-'.$user->id"> ... </flux:modal>@enforeachIn addition to triggering modals in your Blade templates, you can also control them directly from Livewire.
Consider a "confirm" modal in your Blade template like so:
<flux:modal name="confirm"> <!-- ... --></flux:modal>You can now open and close this modal from your Livewire component using the following methods:
<?phpuse Livewire\Component;class ShowPost extends Component { public function delete() { // Control "confirm" modals anywhere on the page... Flux::modal('confirm')->show(); Flux::modal('confirm')->close(); // Control "confirm" modals within this Livewire component... $this->modal('confirm')->show(); $this->modal('confirm')->close(); // Closes all modals on the page... Flux::modals()->close(); }}You can also control modals from Alpine directly using Flux's magic methods:
<button x-on:click="$flux.modal('confirm').show()"> Open modal</button><button x-on:click="$flux.modal('confirm').close()"> Close modal</button><button x-on:click="$flux.modals().close()"> Close all modals</button>Or you can use the window.Flux global object to control modals from any JavaScript in your application:
// Control "confirm" modals anywhere on the page...Flux.modal('confirm').show()Flux.modal('confirm').close()// Closes all modals on the page...Flux.modals().close()If you prefer, you can bind a Livewire property directly to a modal to control its states from your Livewire component.
Consider a confirmation modal in your Blade template like so:
<flux:modal wire:model.self="showConfirmModal"> <!-- ... --></flux:modal>You can now open and close this modal from your Livewire component by toggling the wire:model property.
<?phpuse Livewire\Component;class ShowPost extends Component { public $showConfirmModal = false; public function delete() { $this->showConfirmModal = true; }}One advantage of this approach is being able to control the state of the modal directly from the browser without making a server roundtrip:
<flux:button x-on:click="$wire.showConfirmModal = true">Delete post</flux:button>If you need to perform some logic after a modal closes, you can register a close listener like so:
<flux:modal @close="someLivewireAction"> <!-- ... --></flux:modal>If you need to perform some logic after a modal is cancelled, you can register a cancel listener like so:
<flux:modal @cancel="someLivewireAction"> <!-- ... --></flux:modal>By default, clicking outside the modal will close it. If you want to disable this behavior, you can use the :dismissible="false" prop.
<flux:modal :dismissible="false"> <!-- ... --></flux:modal>Prompt a user for confirmation before performing a dangerous action.
<flux:modal.trigger name="delete-profile"> <flux:button variant="danger">Delete</flux:button></flux:modal.trigger><flux:modal name="delete-profile" class="min-w-[22rem] space-y-6"> <div> <flux:heading size="lg">Delete project?</flux:heading> <flux:subheading> <p>You're about to delete this project.</p> <p>This action cannot be reversed.</p> </flux:subheading> </div> <div class="flex gap-2"> <flux:spacer /> <flux:modal.close> <flux:button variant="ghost">Cancel</flux:button> </flux:modal.close> <flux:button type="submit" variant="danger">Delete project</flux:button> </div></flux:modal>Use the "flyout" variant for a more anchored and long-form dialog.
<flux:modal.trigger name="edit-profile"> <flux:button>Edit profile</flux:button></flux:modal.trigger><flux:modal name="edit-profile" variant="flyout" class="space-y-6"> <div> <flux:heading size="lg">Update profile</flux:heading> <flux:subheading>Make changes to your personal details.</flux:subheading> </div> <flux:input label="Name" placeholder="Your name" /> <flux:input label="Date of birth" type="date" /> <div class="flex"> <flux:spacer /> <flux:button type="submit" variant="primary">Save changes</flux:button> </div></flux:modal><flux:modal variant="flyout" position="left"> <!-- ... --></flux:modal>