Accessible Responsive Modal Window with jQuery and CSS3

File Size: 26.2 KB
Views Total: 2913
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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">



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:


  • add aria-haspopup="dialog"


  • allow for modals to launch within modals



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