A Lightweight and Flexible Modal JavaScript Library | A11y Dialog Component

A11y-Dialog-Component

a11y-dialog-component is a fast, lightweight, and flexible JavaScript vanilla library for creating modal or unconditional dialogs or accessible hints.

How to make use of it:

Download and import the a11y-dialog element into your doc as a module.

<script type="module">
  import Dialogs from './src/a11y-dialog-component.js';
</script>

Import the stylesheet for the essential styling of the modal window.

<link rel="stylesheet" href="./src/main.css">

Initialize the a11y-dialog with choices.

Dialogs.init({
  // options here
});

Create a modal window following the markup structure like this:

<div id="example" class="c-dialog">
  <div class="c-dialog__inner">
    <header>
      <h2 id="dialog-title">Dialog</h2>
    </header>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non.</p>
  </div>
</div>

Show the modal window on the web page.

Dialogs.create('example', {
  labelledbyId: 'dialog-title',
  describedbyId: 'dialog-desc'
});

Sometimes you may want a trigger button to toggle the modal window.

<button
  type="button"
  id="dialog-trigger"
  class="c-btn"
  data-component="dialog"
  data-target="example"
  data-labelledby="dialog-title"
  data-describedby="dialog-desc">
  Open Dialog
</button>

Customize the CSS selectors:

Dialogs.init({
  documentClass: 'js-document',
  documentDisabledClass: 'is-disabled',
  triggerActiveClass: 'is-active',
});

Open/close the modal window programmatically.

Dialogs.open(dialogID);
Dialogs.close(dialogID);

More API strategies.

Dialogs.toggle(dialogID);
Dialogs.destroy(dialogID);
Dialogs.create();

Below is a list of all possible options to change the default configuration.

OptionDefaultValueDescription
documentSelector.js-documentStringCSS selector is used to target the main document.
documentDisabledClassis-disabledStringAdd a class on the document (defined by documentSelector) while the dialog is open and if disableScroll: true.
openingTriggerActiveClassis-activeStringAdd a class on the opening trigger while the dialog is open.
delay200NumberDelay in ms once a trigger event is fired before the dialog autofocus. Usually matches with the CSS transition value to open or close this dialog.

Options

Below is a list of all possible options you can pass to a dialog.

OptionDefaultValueDescription
onOpennoopFunctionThe lifecycle function is invoked when the dialog is opening. The function receives the dialog object as the first parameter and the opening trigger as the second parameter.
onClosenoopFunctionThe lifecycle function is invoked when the dialog is closing. The function receives the dialog object as the first parameter and the closing trigger as the second parameter.
openingSelector""StringCSS selector used to open the dialog.
closingSelector""StringCSS selector is used to closing the dialog.
backdropSelector""StringCSS selector used to include a backdrop element that closes the dialog on click.
helperSelector""StringCSS selector is used to add the active class name(*) while the dialog is open.
labelledby""StringID selector to provide a dialog label (a11y compliant).
describedby""StringID selector to provide a dialog description (a11y compliant).
isModaltrueBooleanIf true, tells assistive technologies that the windows underneath the current dialog are not available for interaction aria-modal="true".
isTooltipfalseBooleanIf true, click outside the current dialog to close it.
isCreatedtrueBooleanIf true, create the dialog when initialized. If disabled, then you need to create it manually by using create() the method.
isOpenfalseBooleanIf true, open the dialog when initialized.
disableScrolltrueBooleanIf true, disable scrolling on the page while the dialog is open.
enableAutoFocustrueBooleanIf true, the focus moves to an element contained in the dialog when it opens.
openingTriggerActiveClass*is-activeStringAdd a class on the opening trigger and helper selectors while the dialog is open.
delay200NumberDelay in ms once a trigger event is fired before the dialog autofocus. Usually matches with the CSS transition value to open or close this dialog.

Accessible Modal Dialog Component, A11y Dialog Component Plugin/Github


See Demo And Download

Official Website(jonathanlevaillant): Click Here

This superior jQuery/javascript plugin is developed by jonathanlevaillant. For extra Advanced usage, please go to the official website.

Share