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
$ 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
</button>

<div id="modal-example" class="modal">
  <p>This is a simple modal</p>
</div>

const btnExample = document.querySelector("#example");
const modalExample = document.querySelector("#modal-example");
btnExample1.addEventListener("click", function () {
  modal.open(modalExample);
});

4. Available options to customize the modal window.

modal.open(modalExample,{
  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
});

Changelog:

06/09/2024

• v0.2.1