THEMETRIAL

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

Author:imhvost
Views Total:0 views
Official Page:Go to website
Last Update:January 11, 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="https://www.cssscript.com/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.0.11 (01/11/2020)

12/30/2020

  • change currentTarget
  • change event.target

10/11/2020

  • default hash change to false

Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.