Press "Enter" to skip to content

A Lightweight and Flexible Modal JavaScript Library | 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();

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *