Display content in a layer above the main page. Ideal for confirmations, alerts, and forms.
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.
In 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:
You can now open and close this modal from your Livewire component using the following methods:
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:
You can now open and close this modal from your Livewire component by toggling the wire:model property.
One advantage of this approach is being able to control the state of the modal directly from the browser without making a server roundtrip:
If you need to perform some logic after a modal closes, you can register a close listener like so:
By default, clicking outside the modal will close it. If you want to disable this behavior, you can use the :dismissible="false" prop.