JS Modal

Easy usage and lightweight vanilla js modal

Installation

You can install it by npm or simply by CDN

npm


        npm install @easonlin0716/js-modal


        // usage
        import modal from "@easonlin0716/js-modal";
        import "@easonlin0716/js-modal/dist/js-modal.min.css";

cdn


        // put css and js resources in your .html or any template
        // css
        
          <link rel="stylesheet"
          href="https://unpkg.com/@easonlin0716/js-modal/dist/js-modal.min.css" />
        
        // js
        
            <script
            src="https://unpkg.com/@easonlin0716/js-modal/dist/js-modal.js"></script>

Usage

Open the modal:

modal.open(el, options)

Close the modal:

modal.close()

Example1: Using with default options


        // first select root element you want to display in modal.
        const myModal = document.querySelector('#my-modal');
        

        // use modal.open to open it.
        modal.open(myModal);

Example2: Draggable modal


        // there're some available options which can be customized.
        modal.open(myModal, { allowDrag: true })

Example3: A modal which can only be closed by clicking ok button


        const myModal = document.querySelector('#my-modal');
        const closeBtn = myModal.querySelector('#close-btn');
        

        modal.open(myModal, { showClose: false, escapeClose: false,
          clickClose: false, });
        

        // You can bind a function to close modal on its button
        closeBtn.addEventListener("click", function () { modal.close();
          });

Options

Option	Type	Default	Description
containerClasses	array	["mask"]	Outer container css classes, accept multiple classes.
closeClass	string	"close-modal"	Closing icon css class.
modalClass	string	"modal"	Modal content container class. This class will be append to the element passed in modal.open
fadeDuration	number	260	Fading duration.
fadeDelay	number	0.6	Modal content fade delay.
showClose	boolean	true	Allow display close button or not.
escapeClose	boolean	true	Allow close by escape button.
clickClose	boolean	true	Allow close by clicking background.
allowDrag	boolean	false	Allow modal to be dragged.