More Features:

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