Modal
Basic
public bool $myModal1 = false;
<x-modal wire:model="myModal1" class="backdrop-blur"> <div class="mb-5">Press `ESC`, click outside or click `CANCEL` to close.</div> <x-button label="Cancel" @click="$wire.myModal1 = false" /></x-modal> <x-button label="Open" @click="$wire.myModal1 = true" />
Complex
public bool $myModal2 = false;
<x-modal wire:model="myModal2" title="Hello" subtitle="Livewire example" separator> <div>Hey!</div> <x-slot:actions> <x-button label="Cancel" @click="$wire.myModal2 = false" /> <x-button label="Confirm" class="btn-primary" /> </x-slot:actions></x-modal> <x-button label="Open" @click="$wire.myModal2 = true" />
Persistent
Add the persistent
attribute to prevent modal close on click outside or when pressing `ESC` key.
<x-modal wire:model="myModal3" persistent class="backdrop-blur"> <div>Processing ...</div> <x-slot:actions> <x-button label="Cancel" @click="$wire.myModal3 = false" /> </x-slot:actions></x-modal> <x-button label="Open Persistent" @click="$wire.myModal3 = true" />
Native HTML
Notice the following examples that onclick
, .showModal()
and .close()
are native HTML stuff, not maryUI/Livewire/Alpine.
This is not a recommended approach if you are using forms, because this is native HTML and there is no state management. Use it only for simple
confirmations.
{{-- Here is modal`s ID --}}<x-modal id="modal17" title="Are you sure?"> <div>Click "cancel" or press ESC to exit.</div> <x-slot:actions> {{-- Notice `onclick` is HTML --}} <x-button label="Cancel" onclick="modal17.close()" /> <x-button label="Confirm" class="btn-primary" /> </x-slot:actions></x-modal> {{-- Notice `onclick` is HTML --}}<x-button label="Open modal" class="btn-primary" onclick="modal17.showModal()" />
maryUI
Sponsor