Accessible Modal/Alert Dialog Plugin With jQuery - aria-dialog

The aria-dialog jQuery plugin allows you to create basic modal windows & alert dialog boxes with Aria attributes and roles for screen reader accessibility.

How to use it:

1. Include the required stylesheet aria-dialog.css in the header of the document.

<link rel="stylesheet" href="aria-dialog.css">

2. The basic HTML structure for the modal window.

<div class="dialog" id="dialog-demo">
  <section class="dialog__wrapper">
    <div class="dialog__container">
      <header class="dialog__header">
        <h2 class="dialog__heading">Default modal dialog</h2>
      </header>
      <div class="dialog__body">
        <p>This is a useful modal dialog. Close dialog?</p>
        <div class="dialog__options">
          <button class="dialog__option-btn" type="button" id="btn-yes">Yes</button>
          <button class="dialog__option-btn" type="button" id="btn-no">No</button>
        </div>
      </div>
    </div>
  </section>
</div>

3. You might need a trigger button to toggle the modal window. 

<button type="button" id="open-demo">Open Modal</button>

4. Initialize the modal window with some options.

$('#dialog-demo').ariaDialog({
  closeWithEsc: true
});

5. Activate the trigger button:

$('#open-demo').click(function () {
  $('#dialog-demo').ariaDialog('open');
});

6. Enable the 'Close' button to close the modal window.

$('#btn-yes').click(function () {
  $('#dialog-demo').ariaDialog('close');
});

7. All default configuration options.

$('#dialog-demo').ariaDialog({
  dialogIdPrefix: 'dialog--',
  wrapperClass: 'dialog__wrapper',
  containerClass: 'dialog__container',
  headingClass: 'dialog__heading',
  mainMessageClass: 'dialog__main-message',
  dialogOpenClass: 'dialog_open',
  wrapperOpenClass: 'dialog__wrapper_open',
  dialogType: 'modal', // modal, alert (alertdialog) -  (non-modal in future versions)
  containerRole: 'document',
  closeWithEsc: true,
  closeOnBgClick: true,
  fadeSpeed: 600,
  cssTransitions: false,
  setFocusOn: 'button:first-child'
});

Change logs:

2018-01-30

• v2.0.2: Check positioning of close button on small screens

2018-01-13

• v2.0

2017-10-09

• v1.1.2

2017-06-21

• bug fixes

2017-06-18

• v0.10.1

2017-05-16

• fixed visual height issue

2017-05-06

• v0.7.1

2017-05-03

• v0.6.1: added 'preventScroll' option which can be used to prevent body from scrolling in the background.

 

---

This awesome jQuery plugin is developed by DavideTriso. For more Advanced Usages, please check the demo page or visit the official website.