moda11y-vanilla-js-modal

Simple vanilla JS modal library based on WAI-ARIA guidelines, specifically as it relates to dialogs / modals.

Please find the demo here.

Jump To:

• Installation
• Usage
• How It Works
• Events
• Methods
• Options

Installation

1. Package can be installed via npm:

npm i @smeechos/moda11y-vanilla-js-modal

2. Include the packages' JavaScript:

import Moda11y from "@smeechos/moda11y-vanilla-js-modal";

3. Include base CSS:

@import "~@smeechos/moda11y-vanilla-js-modal/dist/styles/moda11y-css.min.css";

4. Initialize the class:

let moda11y = new Moda11y();
moda11y.init();

Usage

Below is some sample markup for using the library:

Modal Trigger

<button class="moda11y-trigger"
        data-moda11y-target="moda11y-modal-1"
        aria-haspopup="dialog">
    Modal Trigger
</button>

Modal Content

<div class="moda11y-modal-content" id="moda11y-modal-1">
    <!-- Modal Markup Goes Here-->
</div>

How It Works

Once a modal trigger has been clicked, the modal will be added to the page via JavaScript.

Since there is only ever a single modal at a time, as it is being generated on the fly, you need to ensure that the moda11y-modal-content element is present, and its id matches the data-moda11y-target attribute on the button trigger. This is how the library knows what content to place into the modal once it is generated.

The modal's content will contain all the HTML from within the moda11y-modal-content.

Events

| Method | Element | Description | | ----------- | ----------- | ----------- | | moda11y-shown | moda11y-trigger | Fires once the modal is shown. | | moda11y-shown | moda11y-trigger | Fires when the modal is removed (right before focus is returned to trigger). |

Methods

| Method | Description | Use Case | | ----------- | ----------- | ----------- | | init() | Initializes the library and sets all event listeners. | This is necessary to ensure the modal triggers have the event listeners setup to trigger the modal when clicked. | | reinit() | Re-initializes the library and resets all event listeners. | AJAX is being used to manipulate the DOM, and new triggers are added to the page. Because they weren't present during original init(), we must setup event listeners for those new elements. |

Options

The following options are to be set on the modal trigger button as data attributes.

data-moda11y-classes

Adding this attribute to the modal trigger button will ensure the provided classes are added to the modal when it is created.

<button class="moda11y-trigger"
        data-moda11y-target="moda11y-modal-1"
        data-moda11y-classes="className1 className2"
        aria-haspopup="dialog">
    Modal Trigger
</button>