Easy Draggable Vanilla JavaScript Modal Window – JS-Modal

Category: Javascript , Modal & Popup | January 16, 2023
Views Total:430 views
Official Page:Go to website
Last Update:January 16, 2023


Easy Draggable Vanilla JavaScript Modal Window – JS-Modal


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

How to use it:

1. Install and import the JS-Modal.

$ npm i @easonlin0716/js-modal
// stylesheet
import "@easonlin0716/js-modal/dist/js-modal.min.css";
// ES module
import modal from "@easonlin0716/js-modal";

2. Or load the necessary JavaScript and CSS files from dist folder.

<link rel="stylesheet" href="/dist/js-modal.min.css" />
<script src="/dist/js-modal.js"></script>

3. Enable a trigger element to overlay any element on the top of the page.

<button id="example">
  Open #Example
<div id="modal-example" class="modal">
  <p>This is a simple modal</p>
const btnExample = document.querySelector("#example");
const modalExample = document.querySelector("#modal-example");
btnExample1.addEventListener("click", function () {

4. Available options to customize the modal window.

  containerClasses: ['mask', 'blocker', 'current'],
  closeClass: 'close-modal',
  modalClass: "modal",
  fadeDuration: 260,
  fadeDelay: 0.6,
  showClose: true, // show close button
  escapeClose: true,
  clickClose: true,
  allowDrag: false, // enable draggable

You Might Be Interested In:

Leave a Reply