Display HMTL Content In Popup Window – Modals.js

A lightweight modal JavaScript library to display HTML content in a nice-looking popup window.

How to use it:

1. Load the modals.css and modals.js in the document.

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

2. Insert HTML content to the modal window. Note that each modal must have a unique ID.

<div class="modal" id="demoModal">
  <div class="modal-body">
    <div class="modal-content">
      <div class="modal-close">&times;</div>
      <div class="modal-wrapper">
        <h2>Modal Title</h2>
        <p>Modal Content</p>
      </div>
    </div>
  </div>
</div>

3. Create an empty container for the fullscreen overlay.

<div class="modal-overlay"></div>

4. Create a link to toggle the modal window.

<a class="modal-open" href="/#" data-modal="demoModal">Open The Window</a>

5. Initialize the modal window and done.

const modals = new Modals();

6. Determine whether to allow multiple modal windows on a page. Default: false.

const modals = new Modals({
      allowMultiple: true 
});

7. Determine whether to lock the body scroll when the modal window is opened. Default: true.

const modals = new Modals({
      lockScroll: false
});