Alpine js: How to open a popup?

In Alpine.js, you can use the x-show directive to toggle the visibility of an element, which can be used to create a popup. Here is an example of how you might create a simple popup using the x-show directive:

<div x-data="{ open: false }">
<button @click="open = true">Open Popup</button>
<div x-show="open" @click.away="open = false" class="popup-overlay">
<div class="popup">
<button @click="open = false">Close Popup</button>
<p>Popup content goes here</p>
</div>
</div>
</div>
In this example, the x-data directive is used to create a new reactive data property called open which is initially set to false. The button element has an @click listener that sets the open property to true when clicked. This in turn causes the x-show directive to show the div element with the class popup-overlay.

The div element with class popup-overlay has an event listener @click.away which will be triggered when the user clicks outside of the div element. This listener sets the open property to false which in turn causes the x-show directive to hide the div element with the class popup-overlay.

The div element with class popup has a button with an @click listener that sets the open property to false when clicked. This in turn causes the x-show directive to hide the div element with the class popup-overlay.

You can also customize the css to make it look as a popup.

Note that this is just a basic example, and you can customize it to fit the needs of your specific application.