Accessible Responsive Modal Window with jQuery and CSS3

A simple, lightweight jQuery plugin used for creating a responsive, accessible modal window (dialog box) that provides an universal experience on various screen readers and devices. This plugin will dynamically and automatically adds ARIA attributes and WAI-ARIA roles to help make your modal more accessible. It also provides a Vanilla JavaScript version you can find in the zip.

How to use it:

1. Put the jQuery Accessible Modal Window's CSS file into the head section of your web page.

<link rel="stylesheet" href="assets/modal.css">

2. Put the jQuery Accessible Modal Window's JavaScript file at the bottom of the webapge. Be sure you have jQuery library installed.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="assets/modal.jquery.js"></script>

3. Create the modal content as shown below. You can add any types of html content into the modal.

<div class="modal-overlay" id="modal_window">

  <div class="modal-content" id="modal_holder">

    <h1 id="modal_title">Modal Title</h1>
    
    Modal Content ...

    <button class="btn-close" id="modal_close" type="button" aria-label="close">
      &times;
    </button>

  </div>

</div>

4. Create a modal toggle button on your webpage. That's it.

<button class="btn" type="button" id="modal_open">Open the Modal</button>

Change log:

2017-08-29

• add aria-haspopup="dialog"

2017-06-08

• allow for modals to launch within modals

2016-09-07

• minor updates.

2016-09-03

• add dynamic class feature

---

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