Author: | KittyGiraudel |
---|---|
Views Total: | 55 views |
Official Page: | Go to website |
Last Update: | December 20, 2022 |
License: | MIT |
Preview:

Description:
a11y-dialog is a pure JavaScript plugin to create fully accessible dialog boxes with custom styling and event handling.
Based on the native <dialog>
element.
Installation:
# NPM $ npm install a11y-dialog --save
How to use it:
Import the a11y-dialog.js script into the html file.
<script src="a11y-dialog.js"></script>
Create the dialog box following the html structure as follows:
<div class="dialog" aria-hidden="true" id="myDialog"> <div class="dialog-overlay" tabindex="-1" data-a11y-dialog-hide></div> <div class="dialog-content" aria-labelledby="dialogTitle" aria-describedby="dialogDescription" role="dialog"> <div role="document"> <button data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window">×</button> <h1 id="dialogTitle">Dialog Title</h1> <p id="dialogDescription">Dialog Content</p> </div> </div> </div>
Create an element to toggle the dialog box. Note that the ‘data-a11y-dialog-show’ has to match the dialog ID.
<button data-a11y-dialog-show="myDialog">open the dialog</button>
The necessary styling for the dialog to work.
.dialog[aria-hidden="true"] { display: none; }
The extra dialog styling to make it shiny.
.dialog-overlay { z-index: 2; background-color: rgba(0, 0, 0, 0.66); position: fixed; top: 0; left: 0; bottom: 0; right: 0; } .dialog-content { background-color: rgb(255, 255, 255); z-index: 3; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .dialog-content { padding: 1em; max-width: 90%; width: 600px; border-radius: 2px; } @media screen and (min-width: 700px) { .dialog-content { padding: 2em; } } .dialog-overlay { background-color: rgba(43, 46, 56, 0.9); } .dialog h1 { margin: 0; font-size: 1.25em; } .dialog-close { position: absolute; top: 0.5em; right: 0.5em; border: 0; padding: 0; background-color: transparent; font-weight: bold; font-size: 1.25em; width: 1.2em; height: 1.2em; text-align: center; cursor: pointer; transition: 0.15s; } @media screen and (min-width: 700px) { .dialog-close { top: 1em; right: 1em; } }
Initialize the a11y-dialog via JavaScript.
const myDialog = new A11yDialog(el, containers);
API methods.
// Show the dialog myDialog.show(); // Hide the dialog myDialog.hide(); // Unbind click listeners from dialog openers and closers and remove all bound // custom event listeners registered with `.on()` myDialog.destroy(); // Bind click listeners to dialog openers and closers myDialog.create();
Event handlers.
myDialogon('show', function (dialogEl, event) { // Do something when dialog gets shown // Note: opener is `event.currentTarget` }); myDialogon('hide', function (dialogEl, event) { // Do something when dialog gets hidden // Note: closer is `event.currentTarget` }); myDialogon('destroy', function (dialogEl) { // Do something when dialog gets destroyed }); myDialogon('create', function (dialogEl) { // Do something when dialog gets created // Note: because the initial `create()` call is made from the constructor, it // is not possible to react to this particular one (as registering will be // done after instantiation) });
Changelog:
v7.5.2 (12/20/2020)
- Updated to the latest version