Animated Accessible Modal In Pure JavaScript – microModal

Category: Javascript , Modal & Popup | September 22, 2017
Author: ghosh
Views Total: 260
Official Page: Go to website
Last Update: September 22, 2017
License: MIT

Preview:

Animated Accessible Modal In Pure JavaScript – microModal

Description:

microModal is a lightweight JavaScript library for inserting animated, accessible modal windows into your document.

Installation:

# Yarn
$ yarn add micromodal

# NPM
$ npm install micromodal --save

How to use it:

Create the modal window with your own content as this:

<div class="modal micromodal-bounce" id="modal-1" aria-hidden="true">
  <div class="modal__overlay" tabindex="-1" data-micromodal-close>
    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title" aria-describedby="modal-1-content">
      <div role="document">
        <header class="modal__header">
          <h3 class="modal__title" id="modal-1-title">
            Micromodal
          </h3>
          <button class="modal__close" aria-label="Close modal" aria-controls="modal__container1" data-micromodal-close></button>
        </header>
        <main class="modal__content" id="modal-1-content">
          <p>
            Try hitting the <code>tab</code> key and notice how the focus stays within the modal itself. Also, <code>esc</code> to close modal.
          </p>
        </main>
        <footer class="modal__footer">
          <button class="modal__btn modal__btn-primary">Continue</button>
          <button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
        </footer>
      </div>
    </div>
  </div>
</div>

Add the compiled JavaScript file ‘micromodal.js’ to the web page.

<script src="dist/micromodal.js"></script>

Initialize the modal window.

MicroModal.init();

Show the modal window.

MicroModal.show('modal-1');

The example CSS styles for the modal window.

.modal[aria-hidden='true'] { display: none; }

.modal { font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif; }

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__container {
  background-color: #fff;
  padding: 30px;
  max-width: 500px;
  max-height: 100vh;
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #00449e;
  box-sizing: border-box;
}

.modal__close {
  background: transparent;
  border: 0;
}

.modal__header .modal__close:before { content: "\2715"; }

.modal__content {
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.5;
  color: rgba(0,0,0,.8);
}

.modal__btn {
 font-size: .875rem;
  padding-left: 1rem;
  padding-right: 1rem;
 padding-top: .5rem;
 padding-bottom: .5rem;
  background-color: #e6e6e6;
  color: rgba(0,0,0,.8);
 border-radius: .25rem;
  border-style: none;
  border-width: 0;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
  overflow: visible;
  line-height: 1.15;
  margin: 0;
  will-change: transform;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: -webkit-transform .25s ease-out;
  transition: transform .25s ease-out;
  transition: transform .25s ease-out, -webkit-transform .25s ease-out;
}

.modal__btn:focus, .modal__btn:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.modal__btn-primary {
  background-color: #00449e;
  color: #fff;
}

Callback functions available.

MicroModal.init({
  onClose: function(){},
  onShow: function(){}
});