How can we disable body scrolling when a modal is displayed in Alpine JS?

here is what an A.I. suggests:

In Alpine.js, you can disable body scrolling when a modal is open by toggling a class on the body element. Here’s an example of how you can do it:

function modal() {
    return {
        open: false,
        openModal() {
            this.open = true;
            document.body.style.overflow = 'hidden';
        },
        closeModal() {
            this.open = false;
            document.body.style.overflow = 'auto';
        }
    }
}

In this example, openModal and closeModal are methods that are called when the modal is opened and closed, respectively. When the modal is opened, the openModal method sets the overflow style of the body to ‘hidden’, which disables scrolling. When the modal is closed, the closeModal method sets the overflow style of the body back to ‘auto’, which re-enables scrolling.

<div x-data="modal()">
    <button @click="openModal()">Open Modal</button>
    <div x-show="open" @click.away="closeModal()">
        <!-- Modal content -->
    </div>
</div>

In this example, clicking the button calls the openModal method and opens the modal. Clicking outside the modal calls the closeModal method and closes the modal. While the modal is open, scrolling on the body is disabled. When the modal is closed, scrolling is re-enabled. This should give you the behavior you’re looking for.