Lean Modal Dialog Plugin – EasyModal

Category: Javascript , Modal & Popup | October 30, 2023
Author:ZertyCraft
Views Total:71 views
Official Page:Go to website
Last Update:October 30, 2023
License:MIT

Preview:

Lean Modal Dialog Plugin – EasyModal

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

You Might Be Interested In:


Leave a Reply