JS Modal Examples

Download Back To CSSScript.Com

A lightweight, draggable, easy-to-use Vanilla JS modal that displays any DOM element in an overlay on top of the current page.

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