如何防止点击背景时关闭Laravel Jetstream模态框

你想要实现的Bootstrap中backdrop: 'static'+keyboard: false的效果，在Jetstream中可以通过修改模态框的事件监听逻辑实现，以下是不同版本的具体操作：

Livewire版本Jetstream #

方式1：全局修改所有模态框为static模式 #

1. 找到Jetstream发布的模态框组件文件：resources/views/vendor/jetstream/components/dialog-modal.blade.php
2. 删除/注释组件根元素上的两个事件监听：
   • 移除x-on:click.outside="close"：禁止点击模态框外部关闭
   • 移除x-on:keydown.escape.window="close"：禁止按下ESC键关闭
3. 修改后所有模态框都只会响应关闭/取消按钮的主动关闭事件。

方式2：仅给单个模态框设置static模式 #

不需要修改全局组件，在使用模态框时直接添加事件阻止属性即可：

<x-jet-dialog-modal wire:model="showYourModal" x-on:click.outside.prevent x-on:keydown.escape.prevent>
    <!-- 模态框标题、内容等其他代码保持不变 -->
    <x-slot name="footer">
        <x-jet-secondary-button wire:click="$set('showYourModal', false)">
            取消
        </x-jet-secondary-button>
        <!-- 其他操作按钮 -->
    </x-slot>
</x-jet-dialog-modal>

Inertia(Vue)版本Jetstream #

方式1：全局修改所有模态框为static模式 #

1. 找到模态框组件文件：resources/js/Jetstream/DialogModal.vue
2. 删除/注释根元素上的两个事件监听：
   • 移除@click.outside="close"
   • 移除@keydown.escape.window="close"

方式2：灵活配置单个模态框的static模式 #

先修改全局模态框组件，新增static属性适配：

1. 打开resources/js/Jetstream/DialogModal.vue，新增prop定义：

props: {
    // 原有prop保留，新增以下配置
    static: {
        type: Boolean,
        default: false
    }
}

2. 修改两个关闭事件的逻辑：

<!-- 把原来的根元素事件替换成以下逻辑 -->
<div @click.outside="static || close" @keydown.escape.window="static || close">
    <!-- 原有模态框内容保持不变 -->
</div>

3. 需要使用static模式时，在调用模态框时传参即可：

<DialogModal :show="showModal" :static="true" @close="showModal = false">
    <!-- 模态框内容 -->
    <template #footer>
        <button @click="showModal = false">取消</button>
    </template>
</DialogModal>

内容的提问来源于stack exchange，提问作者Manasse