IHModals

Simple lightweight, accessible, fully tested modal library.

Accessibility support

This library is in support of of the WAI-ARIA guidelines. Proper attributes are applied and focus is kept inside the modal.

Usage

IHModals is designed to give good control to the developer by implementing nothing but the essentials. To get started, create a modal element.

<div class="modal" role="dialog" aria-modal="true" aria-labelledby="title" aria-describedby="description">
    <h2 id="title">Test</h2>

    <p id="description">This is a test modal. </p>

    <button class="modal__close" aria-label="Close" onclick="closeModal()">
        &#10005;
    </button>
</div>

The library sets basic attributes (role, aria-modal) required for a accessible modal when missing, but including them yourself and additional properties such as aria-labelledby and aria-describedby pointing to modal title and description is recommended.

To initialize the modal with javasript

import IHModals from "ihmodals";

const modal = new IHModals(document.querySelector('.modal'), {closeOnBackgroundClick: true});

function openModal(event) {
    modal.open();
    modal.onCloseOnce(() => {
        event.target.focus()
    });
}

It is recommended to return focus to the element that triggered the modal opening.

Basic styling is provided with the library. For more detailed api, check the documentation.

Api