Close the modal when a user click outside the modal

[dayemsiddiqui]

Hi I have started using flux in my project, so far I really like, but I have noticed that the modal does not automatically close when a user clicks out side the modal, infact I looked at the modal example on the documentation site and the only way to close the modal is by clicking the close icon.

How can I configure the modal to automatically close when the click happens outside the modal

[hugoaf]

You could publish the modal and modify the flux/modal/index.blade.php to add the click event in the <ui-modal

<ui-modal {{ $attributes }} data-flux-modal x-on:click="$dispatch('modal-close', { name: '{{ $name }}' })">

Then wrap your modal content in a div where you add a click event with stop propagation.

<flux:modal>
    <div x-on:click="event.stopPropagation()" class="space-y-6">

[dayemsiddiqui]

hi good suggestion @hugoaf , however I hope there is a simpler way to do this out of the box, if I have write custom code for such a basic functionality it kind of defeats the purpose of using this library 😓

[patrykszady]

@dayemsiddiqui I agree. This was handled in alpine modal component

[trungpv1601]

Same +1