alpine-modal-generator

1.1.0 • Public • Published

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 alpine-modal-generator@0.0.36

Installation Cdn

Link

<script src="https://cdn.jsdelivr.net/npm/alpine-modal-generator@0.0.36"></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

Package Sidebar

Install

npm i alpine-modal-generator

Weekly Downloads

0

Version

1.1.0

License

MIT

Unpacked Size

10.7 kB

Total Files

5

Last publish

Collaborators

  • findi