<div x-data="{ open: false }" class="relative">
        <!-- Modal toggles -->
        <button type="button" class="btn btn-primary" @click="open = true">
            Launch modal
        </button>
        <!-- Modal -->
        <div x-show="open" class="modal" tabindex="-1" role="dialog" :class="open && 'show d-block'">
            <div class="modal-dialog modal-dialog-centered" style="z-index: 1060;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="modal-title">Modal title</h1>
                        <button type="button" class="btn-close" @click="open = false" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        This is the modal body which can contain all types of custom content, such as
                        forms, tooltips, popovers, grids, etc.
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" @click="open = false">Close</button>
                        <button type="button" class="btn btn-primary">Save</button>
                    </div>
                </div>
            </div>
            <div class="modal-backdrop fade show" @click="open = false"></div>
        </div>
    </div>