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

Accessible Modal/Alert Dialog Plugin With jQuery - aria-dialog
File Size: 20.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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,
  deepLinking: false,
  setFocusOn: 'button:first-child'
});

Change log:

2017-08-28

  • v1.1.0

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.