Creating Minimal Inline Modal Windows In JavaScript – jsPopUp

Preview:

Description:

An ultra-small (less than 1kb) JavaScript library to display a basic modal dialog box on the page.

How to use it:

1. Import the jsPopUp.css and jsPopUp.js files into the HTML file.

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

2. Add modal header & body to the dialog box.

<div class="modal-overlay" id="modal">
  <div class="modal">
    <div class="modal-header">
      <div class="title">
        Modal Title
      </div>
      <button class="close-button" id="close-modal">&times;</button>
    </div>
    <div class="modal-body">
      Main Content Here
    </div>
  </div>
</div>

3. Create a button to launch the modal dialog. Done.

<button id="open-modal">Launch</button>