Press "Enter" to skip to content

A Lightweight and Elegant Accessible Modal Window | accessible-minimodal

Accessible Mini Model is a simple, flexible, configurable, and accessible form window built with regular JavaScript. Use the standard JS plugin to add dialog boxes to your site for Lightbox, user notifications, or fully customized content.

More Features:

  • Inspired by the typical Bootstrap component.
  • Blurs background content when the form is opened.
  • Multiple conditional instances on the page.
  • Locks the page when the form is opened.
  • Rejects media when clicked Away.
  • 7 CSS3 Animations: Slide, Fade, Zoom, etc.

How to make use of it:

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

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

2. Add content to the modal window as follows. Be certain so as 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 accomplished it.

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

5. Customize the modal window with the next choices:

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: true,
        add: true,
        remove: true
      },
      // 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) {}
      },
})

Bootstrap Style Accessible Modal Window, accessible mini model Plugin/Github


See Demo And Download

Official Website(imhvost): Click Here

This superior jQuery/javascript plugin is developed by imhvost. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *