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:

Open Popup


Close Popup
Popup content goes here



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.