Modals / Dialogs in Flux Laravel Livewire

Let's learn how modals work in Flux with Laravel Livewire.

The confirmation dialog we're going to present is native to the component library we're using, which in this case would be Flux for our Laravel Livewire application. Here, you'll likely have the approach we used earlier, which was through the JavaScript confirmation.

We have a Modal component:

<flux:modal name="NAME">
   *** CONTENT ***
</flux:modal>

In the content, you can put anything, in our case, it will be a message like the following:

<flux:modal name="delete-category">
   <div class="m-1">
       <flux:heading>{{ __('Delete Category') }}</flux:heading>
       <flux:text class="mt-2">{{ __('Are you sure you want to delete this category?') }}</flux:text>

       <div class="flex flex-row-reverse">
       <flux:button class="mt-4" variant='danger' icon="trash">
           {{ __('Delete') }}
       </flux:button>
       </div>
   </div>
</flux:modal>

Activate the modal

Note that it is a simple modal flux Trigger, here the name is important:

<flux:modal.trigger name="delete-category">
    <flux:button class="ml-3" variant='danger' size="xs">{{ __('Delete') }}</flux:button>
</flux:modal.trigger>

Since with the name sorry this is the button to see this the modal is the button I think there is a simpler one flux modal well this would be from the interesting component here it would be through javascript flux modal:

<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>

***

// Control "confirm" modals anywhere on the page...
Flux.modal('confirm').show()

We also have flux model trigger which would be the button we showed before and through the wire object:

<flux:button x-on:click="$wire.showConfirmModal = true">Delete post</flux:button>

Close the Modal

To close the modal, you can cancel it by clicking outside it or by clicking on the x. So adding a third one seems redundant to me.

Conclusions

In short, flux modal the same name here you put whatever you really want and then to activate it we have like four different ways really but as who says the one that is not already using at least directly and therefore the one we used would be the flux model trigger, that is to say the trigger here you put the trigger which in this case is a button when you click on it it is simply activated based on the selected name which again has to be the same as that of the modal and here you customize the design as you want in this case we used the same one that I had here so also the modal works that easy what you want to do with the modal is up to you as you can see in the official example There they are placing a form to edit the profile or something like that.

01-04-2025 - Andrés Cruz

En español

• Category
• /
• Laravel
• /
• Modals / Dialogs in Flux Laravel Livewire