A utility package designed to simplify operations with modal windows using Alpine.js.
You can install alpine-modal-generator
via npm:
npm install alpine-modal-generator@0.0.36
Link
<script src="https://cdn.jsdelivr.net/npm/alpine-modal-generator@0.0.36"></script>
After installing the package, initialize the page by adding this code to your js file
<script>
document.addEventListener('alpine:init', () => {
Alpine.store('modal', window.modalManager);
window.modalManager.init();
});
</script>
Next, to fix the body of the page, add the following code in your css file
[x-cloak] {
display: none;
}
.app--fix {
overflow: hidden;
}
<button x-on:click="$store.modal.open('modal')">Open modal</button>
<div x-show="$store.modal.isOpen('modal')" x-cloak class="modal" x-on:click.self="$store.modal.close()">
<div class="modal-content">
<span class="modal-close" x-on:click="$store.modal.close()">✖</span>
<p>You contents</p>
</div>
</div>
Method is used to open a modal window. Takes the name of the window as a parameter
Method checks to show or hide the modal window. Takes the name of the modal as a parameter
A method that hides modal. The parameter takes the name modal