User-friendly Modal Dialog In Vanilla JavaScript – minimal-modal

A minimal and easy JavaScript modal library to help developers create an animated, nice-looking, user-friendly modal dialogs on the web app.

More Features:

• Loads content from within the document.
• Auto traps focus within the modal.
• Prevents body scrolling when the modal is activated.
• Easy to customize with CSS.

Install & Download:

# NPM
$ npm install @ohnaka0410/minimal-modal --save

How to use it:

1. Code the HTML for the modal and replace the modal title, body, and body as follows:

<div class="modal" id="modal-example">
  <div class="modal__overlay js-close-modal-trigger" tabindex="-1">
    <div class="modal__container">
      <header class="modal__header">
        <h2 class="modal__title">
          Modal Title
          </h2>
        <button class="modal__close js-close-modal-trigger">
          ✕
        </button>
      </header>
      <main class="modal__content">
        <p>
          Modal Content
        </p>
      </main>
      <footer class="modal__footer">
        <button class="button js-close-modal-trigger">Close</button>
      </footer>
    </div>
  </div>
</div>

2. The required CSS styles for the modal.

.modal {
  display: none;
}
.modal[open] {
  display: block;
}

3. The example CSS to customize the modal styles & open/close animations.

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.modal__container {
  background-color: #fff;
  padding: .5rem;
  max-width: 400px;
  max-height: 100vh;
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box;
}
.modal__header {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
  padding: .5rem;
}
.modal__title {
}
.modal__close {
  margin-left: auto;
}
.modal__content {
  padding: .5rem;
}
.modal__footer {
  padding: .5rem;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: end;
          justify-content: flex-end;
}
@-webkit-keyframes modalFadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes modalFadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@-webkit-keyframes modalSlideIn {
  from { -webkit-transform: translateY(-15%); transform: translateY(-15%); }
    to { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes modalSlideIn {
  from { -webkit-transform: translateY(-15%); transform: translateY(-15%); }
    to { -webkit-transform: translateY(0); transform: translateY(0); }
}

.modal[open] .modal__overlay {
  -webkit-animation: modalFadeIn .3s ease-in;
          animation: modalFadeIn .3s ease-in;
}
.modal[open] .modal__container {
  -webkit-animation: modalSlideIn .3s ease-in;
          animation: modalSlideIn .3s ease-in;
}

.modal .modal__container,
.modal .modal__overlay {
  will-change: transform;
}

4. Import the minimal-modal as an ES module.

import MinimalModal from '@ohnaka0410/minimal-modal';

5. Or load the UMD version in the document.

<!-- Local -->
<script src="/path/to/dist/minimal-modal.min.js"></script>
<!-- CDN -->
<script src="https://cdn.jsdelivr.net/npm/@ohnaka0410/minimal-modal/dist/minimal-modal.min.js"></script>

6. Show the modal on page load.

MinimalModal.activate();

7. Or enable a toggle button to launch the modal.

// open
const modal = document.querySelector('#modal-example');
MinimalModal.show(modal);
// close
MinimalModal.close();

Changelog:

v2.1.7 (04/24/2021)

• package updated

v2.1.6 (03/17/2021)

• update bodyScrollLockIgnore trigger

v2.1.1 (01/08/2021)

• fix scroll in modal

v2.1.0 (12/29/2020)

• Update

v2.0.1 (12/14/2020)

• Allows multiple modals

v1.0.4 (11/08/2020)

• Fixed for IE

v1.0.1 (10/28/2020)

• Fixed for IE