Simple Vanilla JavaScript Modal Window Library – open-modal

Preview:

Description:

If you’ve been looking for a Modal Library, but are tired of all the fancy stuff, then this is your simple vanilla solution.

Modal windows are now a standard part of web design — everybody’s using them. Or maybe not everybody, but lots of people are using them.

It’s strange that such a simple thing has had such a big impact on design. After all, how hard can it be to pop up a window and force the user to click somewhere? But they’re more than just simple popups: they can be used as lightboxes, signup boxes, login boxes, and so much more.

open-modal is a vanilla JavaScript library for easily creating modal windows with a sticky header and footer. Works with any HTML element and requires no dependencies.

How to use it:

1. Load the main JavaScript in the document.

<script src="dist/open-modal-js.umd.js"></script>

2. Load the default modal stylesheet. Not required.

<link rel="stylesheet" href="assets/css/default-modal-styles.css" />

3. Code the HTML for the modal window. None of the CSS classes or semantic structure below are required for the modal to work, you can use your own classes, styles, and markups.

<div id="main-modal" class="modal">
  <!--Modal should close on .modal-overlay click-->
  <div class="modal-overlay"></div>
  <!--Prevents from focusing outside the modal via TAB press-->
  <div tabindex="0"></div>
  <!--Must have wrapper, for the content scroll to work properly-->
  <div
    class="modal-card"
    role="dialog"
    aria-modal="true"
    aria-labelledby="main-modal-label"
    aria-describedby="main-modal-description"
  >
    <!--Adds background, wraps elements, keeps max. height/width to fit the screen-->
    <div class="modal-body">
      <!--.modal-close elements close the modal-->
      <a href="#" role="button" aria-label="Close modal" class="modal-close x-icon"></a>
      <!-- .modal-header Keeps the content sticky on top-->
      <div id="main-modal-label" class="modal-header">
        <h3>Modal Title</h3>
      </div>
      <!-- .modal-content Scrollable content-->
      <div id="main-modal-description" class="modal-content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda,
          blanditiis expedita facere, facilis neque nesciunt officiis optio perspiciatis
          quibusdam quidem sed. Dignissimos dolorum inventore magnam repellat sed, velit
          voluptatum.
        </p>
      </div>
      <!-- .modal-footer Keeps the content sticky on bottom-->
      <div class="modal-footer">
        <!--.modal-close elements close the modal-->
        <div>
          <button class="modal-close">Close Modal</button>
        </div>
        <b>Modal Footer</b>
      </div>
    </div>
  </div>
  <!--Prevents from focusing outside the modal via TAB press-->
  <div tabindex="0"></div>
</div>

4. Create a new instance of the modal window.

const OpenModalJs = window.OpenModalJs;
const mainModal = new OpenModalJs("main-modal");

5. Toggle the modal window.

// open
mainModal.openModal();
// or
mainModal.isOpen = true
// close
mainModal.closeModal();
mainModal.isOpen = false

6. Available options to customize the modal.

const mainModal = new OpenModalJs("main-modal",{
      {
        openOnInit: false,
        openClass: "open",
        overlayClass: "modal-overlay",
        closeButtonClass: "modal-close",
      }, 
});

7. Callback functions.

const mainModal = new OpenModalJs("main-modal",{
      {
        openOnInit: false,
        openClass: "open",
        overlayClass: "modal-overlay",
        closeButtonClass: "modal-close",
      }, 
      {
        onOpening: () => {},
        onOpened: () => {},
        onClosing: () => {},
        onClosed: () => {},
      }
});

8. Override the default styles of the modal window.

/* default-modal-styles.css *
.modal {
  visibility: hidden;
  transition: all 0.4s;
  opacity: 0;
}
.modal.open {
  visibility: visible;
  opacity: 1;
}
.modal,
.modal-overlay {
  position: fixed;
  left: 0;
  top: 0;
  height: var(--screen-h, 100vh);
  width: 100vw;
  z-index: 100;
}
.modal-overlay {
  background: rgba(0, 0, 0, 0.5);
}
.modal,
.modal-card,
.modal-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.modal-content {
  overflow: auto;
  flex-grow: 1;
  max-width: 500px;
}
.modal-body {
  z-index: 101;
  margin: auto;
  max-height: calc(var(--screen-h, 100vh) - 1rem);
  max-width: calc(100vw - 1rem);
  border-radius: 10px;
  overflow: hidden;
  min-width: 320px;
  background: white;
  position: relative;
  padding: 1rem;
}
.modal-header {
  text-transform: capitalize;
}
.modal-footer {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}
.x-icon {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.x-icon:hover {
  opacity: 1;
}
.x-icon:before,
.x-icon:after {
  left: calc(1.5rem / 2);
  height: 1.5rem;
  width: 2px;
  border-radius: 2px;
  position: absolute;
  content: " ";
  background-color: #333;
}
.x-icon:before {
  transform: rotate(45deg);
}
.x-icon:after {
  transform: rotate(-45deg);
}

9. Events.

document.addEventListener('opening:modal', handler) 
document.addEventListener('opened:modal', handler)
document.addEventListener('closing:modal', handler)
document.addEventListener('closed:modal', handler)