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

File Size: 52.1 KB
Views Total: 1867
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>
      <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>

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.

  closeWithEsc: true

5. Activate the trigger button:

$('#open-demo').click(function () {

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

$('#btn-yes').click(function () {

7. All default configuration options.

  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:


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


  • v2.0


  • v1.1.2


  • bug fixes


  • v0.10.1


  • fixed visual height issue


  • v0.7.1


  • 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.