Alpine Modal Generator

A utility package designed to simplify operations with modal windows using Alpine.js.

Installation Npm

You can install alpine-modal-generator via npm:

npm install [email protected]

Installation Cdn

Link

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Initialization and basic settings

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;
}

Use

 <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()">&#10006;</span>
            <p>You contents</p>
        </div>
    </div>

Methods

open('you-modal-name')

Method is used to open a modal window. Takes the name of the window as a parameter

isOpen('you-modal-name')

Method checks to show or hide the modal window. Takes the name of the modal as a parameter

close('you-modal-name')

A method that hides modal. The parameter takes the name modal