Блог

Главная - Вопросы по программированию - Как предотвратить закрытие модального потока laravel jetstream при нажатии на фон?

Как предотвратить закрытие модального потока laravel jetstream при нажатии на фон?

#laravel #tailwind-css #laravel-livewire #alpine.js #jetstream

Вопрос:

Я хотел бы jetstream modal static … закрыть только в том случае, если щелчок будет сделан с помощью кнопки отмена.

В бутстрэпе я мог бы сделать это

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

Комментарии:

1. Для таких вопросов, как правило, предполагается также предоставить базовый блок кода, который воспроизводит вашу проблему.

Ответ №1:

Решение, которое я нашел, состояло в том, чтобы удалить x-on:click событие в модальном компоненте после публикации компонентов jetstream.

измените это

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

Для

 <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>
Метки: