Modal

Native HTML

Notice the following examples that onclick , .showModal() and .close() are native HTML stuff, not Mary/Livewire/Alpine.

{{-- Note `onclick` is HTML --}}
<x-button label="Open modal" class="btn-primary" onclick="modal17.showModal()" />
 
{{-- Here is modal`s ID --}}
<x-modal id="modal17" title="Are you sure?">
    Click "cancel" or press ESC to exit.
 
    <x-slot:actions>
        {{-- Note `onclick` is HTML --}}
        <x-button label="Cancel" onclick="modal17.close()" />
        <x-button label="Confirm" class="btn-primary" />
    </x-slot:actions>
</x-modal>

With Livewire

Instead of id="xxx" use wire:model.

public bool $myModal = false;

{{-- Livewire: fires network request --}}
<x-button label="Livewire" class="btn-primary" wire:click="$toggle('myModal')" />
 
{{-- Alpine: no network request --}}
<x-button label="Alpine" class="btn-warning" @click="$wire.myModal = true" />
 
{{-- Note `wire:model`, no `id="xxx"` --}}
<x-modal wire:model="myModal" title="Hello" subtitle="Livewire example" separator>
    Press `ESC`, click outside or click `CANCEL` button to close.
 
    <x-slot:actions>
        <x-button label="Cancel" @click="$wire.myModal = false" />
        <x-button label="Confirm" class="btn-primary" />
    </x-slot:actions>
</x-modal>

Persistent

Add the persistent attribute to prevent modal close on click outside or when pressing `ESC` key.

{{-- Livewire: fires network request --}}
<x-button label="Livewire" class="btn-primary" wire:click="$toggle('myPersistentModal')" />
 
{{-- Alpine: no network request --}}
<x-button label="Alpine" class="btn-warning" @click="$wire.myPersistentModal = true" />
 
{{-- Note `persistent` --}}
<x-modal wire:model="myPersistentModal" title="Persistent" separator persistent>
    I won't close unless you click on `CANCEL` button.
 
    <x-slot:actions>
        <x-button label="Cancel" @click="$wire.myPersistentModal = false" />
        <x-button label="Confirm" class="btn-primary" />
    </x-slot:actions>
</x-modal>

mary

Sponsor