CODEWITHSUNDEEP
laraveltailwind-csslaravel-livewirealpine.jslaravel-jetstream
Manasse
Manasse

Reputation: 39

How to prevent laravel jetstream modal to close when clicking on the background?

I would like to make the jetstream modal static .. dismiss only if the click is done via the cancel button.

In bootstrap I could do this

$('#myModal').modal({
backdrop: 'static',
keyboard: false
})

Upvotes: 1

Views: 1868

Answers (1)

Manasse
Manasse

Reputation: 39

The solution I have found was to remove the x-on:click event in the modal component after publishing jetstream components.

change this

<div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-300"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    x-transition:leave="ease-in duration-200"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0">
        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
    </div>

to

<div x-show="show" class="fixed inset-0 transform transition-all"  x-transition:enter="ease-out duration-300"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    x-transition:leave="ease-in duration-200"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0">
        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
    </div>

Upvotes: 2

Related Questions