Lean Modal Dialog Plugin – EasyModal

Preview:

Description:

A lightweight and intuitive JS library for creating customizable modal dialogs that overlay page content and grab the user’s attention.

The content inside the modal is completely customizable. You can put any HTML content in there that you want.

How to use it:

1. Download and link to the EasyModal’s files.

<link rel="stylesheet" href="easymodal.css">
<script src="easymodal.js"></script>

2. Create a new instance of EasyModal. You can customize content, width, height, and other options here.

const modal = new EasyModal({
      content: "<p>Hello World!</p>",
      width: "500px",
      height: "300px",
      closeButton: true
});

3. Create a toggle button to open the modal.

<button id="openModalBtn">Open Modal</button>

4. Add an event handler to open the modal when the user clicks on the button.

document.getElementById('openModalBtn').addEventListener('click', function () {
  modal.open();
});

5. Definition of a global function to close the modal. This is necessary because the close button in the modal uses an inline event handler that refers to a ‘modal.close()’ function that must be available globally.

window.closeModal = function () {
  modal.close();
};