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 class="modal-title">This is a modal</div>
        class="modal-close-btn close"
        aria-label="Close Modal"
      <label aria-label="Input">
        <input type="text" placeholder="Input">
      <label aria-label="Input">
        <input type="text" placeholder="Input">

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 Usage, please go to the official website.