Animated Accessible Modal In Pure JavaScript – microModal

Preview:

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(){}
});

Full configuration options.

MicroModal.init({
  openTrigger: 'data-custom-open',
  closeTrigger: 'data-custom-close',
  openClass: 'is-open',
  disableScroll: true, 
  disableFocus: false,
  awaitOpenAnimation: false,
  awaitCloseAnimation: false, 
  debugMode: true
});

Changelog:

v0.4.10 (11/28/2020)

• Fixed bugs

v0.4.9 (11/24/2020)

• Fixed bugs

v0.4.7 (11/23/2020)

• Fixed bugs

v0.4.6 (03/27/2020)

• Removed focus error when no focusable element exists in the modal

v0.4.5 (03/26/2020)

• Bugs fixed

v0.4.4 (03/26/2020)

• Added ability to customize open class name

v0.4.3 (03/25/2020)

• Finds a focusable element which is not the close button on modal open
• Handle events cleanup if modals are not closed properly
• The original trigger event is now passed to the onShow and onClose methods
• Bugs fixed

v0.4.2 (02/25/2020)

• Add dist files into the zip.

v0.4.1 (09/05/2018)

• FEATURE A flag to awaitOpenAnimation before focusing on element in modal.
• FEATURE Passing actual node as second argument to onShow.
• BUGFIX Fixed issue where active element was undefined.
• BUGFIX Fixed issue where an opened modal could not be closed by id.

v0.4.0 (05/06/2018)

• Added abilty to close modals by ID
• Fixed bug where micromodal would error on initialization
• Fixed bug where IE crashed due to null reference
• Fixed bug which didn’t lock modal overlay in IE

v0.3.2 (07/08/2018)

• BUGFIX Fixed bundling for es and umd builds