Bootstrap Style Accessible Modal Window In Pure JavaScript – accessible-minimodal

Category: Javascript , Modal & Popup | August 12, 2021
Author:imhvost
Views Total:39 views
Official Page:Go to website
Last Update:August 12, 2021
License:MIT

Preview:

Bootstrap Style Accessible Modal Window In Pure JavaScript – accessible-minimodal

Description:

A minimal, flexible, configurable, accessible modal window built using plain JavaScript.

Inspired by Bootstrap’s Modal component.

More Features:

  • Inspired by Bootstrap’s Modal component.
  • Blurs the background content when the modal is opened.
  • Multiple modal instances on a page.
  • Locks the page when the modal is opened.
  • Dismisses the modal on click outside.
  • 7 CSS3 animations: slide, fade, zoom, etc.

How to use it:

1. Insert the accessible-minimodal.min.js script into the HTML page and we’re ready to go.

<script src="accessible-minimodal.min.js"></script>

2. Add content to the modal window as follows. Be sure to add role="dialog", aria-modal="true", and aria-labelledby attributes to the modal window for accessibility.

<div 
  id="modal-example"
  aria-hidden="true"
  class="modal"
  style="display:none;">
  <div
    tabindex="-1" 
    class="modal-wrapp">
    <div 
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-open-btn-example"
      class="modal-body">
      <div class="modal-title">This is a modal</div>
      <button
        type="button"
        class="modal-close-btn close"
        aria-label="Close Modal"
        data-modal-close></button>
      <label aria-label="Input">
        <input type="text" placeholder="Input">
      </label>
      <label aria-label="Input">
        <input type="text" placeholder="Input">
      </label>
      <button>Button</button>
    </div>
  </div>
</div>

3. Create a button to launch the modal when needed.

<button id="modal-open-btn-example" data-modal-open="modal-example">Open Modal</button>

4. Initialize the modal library and done.

const modal = AccessibleMinimodal.init({
      // options here
})

5. Customize the modal window with the following options:

const modal = AccessibleMinimodal.init({
      // default CSS selectors
      classes: {
        modal: 'modal',
        wrapp: 'modal-wrapp',
        body: 'modal-body',
        active: 'active'
      },
      // disable page scroll when activated
      disableScroll: true,
      // auto move focus to the modal on page load
      focus: true,
      hash: {
        open: false,
        add: false,
        remove: false
      },
      // allows for multiple modal instances
      multiple: false,
      // closes the modal on click outside
      outsideClose: true,
      // custom styles here
      style: {
        use: true,
        width: 400,
        valign: 'center', // center, top, bottom
        openAnimation: 'from-bottom', // // from-bottom, from-top, from-left, from-right, zoom-in, zoom-out, fade
        animationDuration: 400
      },
      // selectors of triggers
      triggers: {
        open: 'data-modal-open',
        close: 'data-modal-close'
      }
})

6. Event handlers.

const modal = AccessibleMinimodal.init({
      on: {
        beforeOpen: function (instance) {},
        afterOpen: function (instance) {},
        beforeClose: function (instance) {},
        afterClose: function (instance) {}
      },
})

Changelog:

v1.1.9 (08/12/2021)

  • registerTriggers fix

v1.1.8 (08/04/2021)

  • Bugfix
  • Remove console log

v1.1.6 (07/14/2021)

  • getScrollbarWidth() fix

v1.1.5 (05/01/2021)

  • classes fix

v1.1.4 (03/30/2021)

  • fix closeModal

v1.1.3 (02/08/2021)

  • fix changeFocus

v1.1.0 (02/07/2021)

  • Update

v1.0.11 (01/11/2021)

  • Fix outsideClose

12/30/2020

  • change currentTarget
  • change event.target

10/11/2020

  • default hash change to false

You Might Be Interested In:


Leave a Reply