An easy way to add focus trap to the modal is to add this first party focus trap plugin: https://alpinejs.dev/plugins/focus

bootstrap.js

import axios from 'axios';
import Alpine from 'alpinejs'
import focus from '@alpinejs/focus'

window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

window.Alpine = Alpine;

Alpine.plugin(focus);
Alpine.start();

modal.blade.php

@props(['name', 'title'])

<div
    x-data="{ show: false, name: @js($name) }"
    x-show="show"
    x-trap="show"
    @open-modal.window="show = ($event.detail === name)"
    @keydown.escape.window="show = false"
    x-transition:enter="ease-out duration-250"
    x-transition:enter-start="opacity-0 -translate-y-4"
    x-transition:enter-end="opacity-100"
    x-transition:leave="ease-in duration-250"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0 -translate-y-4"
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-xs"
    style="display:none;"
    role="dialog"
    aria-modal="true"
    aria-labelledby="modal-{{ $name }}-title"
    :aria-hidden="!show"
    tabindex="-1"
    id="modal-{{ $name }}"

>
    <x-card is="div" @click.away="show = false">
        <div>
            <h2 id="modal-{{ $name }}-title" class="text-2xl font-bold">{{ $title }}</h2>
        </div>

        <div>
            {{ $slot }}
        </div>
    </x-card>
</div>

And you can add some extra spice by disabling scrolling when a modal is open:

body:not(:has([role='dialog'][aria-hidden])) {
    overflow: hidden;
}

Create A Functional Modal With AlpineJS