a11y-dialog-component is a fast, lightweight, and flexible JavaScript vanilla library for creating modal or unconditional dialogs or accessible hints.
How to make use of it:
Download and import theΒ a11y-dialog element into your doc as a module.
<script type="module"> import Dialogs from './src/a11y-dialog-component.js'; </script>
Import the stylesheet for the essential styling of the modal window.
<link rel="stylesheet" href="./src/main.css">
Initialize theΒ a11y-dialog with choices.
Dialogs.init({ // options here });
Create a modal window following the markup structure like this:
<div id="example" class="c-dialog"> <div class="c-dialog__inner"> <header> <h2 id="dialog-title">Dialog</h2> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non.</p> </div> </div>
Show the modal window on the web page.
Dialogs.create('example', { labelledbyId: 'dialog-title', describedbyId: 'dialog-desc' });
Sometimes you may want a trigger button to toggle the modal window.
<button type="button" id="dialog-trigger" class="c-btn" data-component="dialog" data-target="example" data-labelledby="dialog-title" data-describedby="dialog-desc"> Open Dialog </button>
Customize the CSS selectors:
Dialogs.init({ documentClass: 'js-document', documentDisabledClass: 'is-disabled', triggerActiveClass: 'is-active', });
Open/close the modal window programmatically.
Dialogs.open(dialogID); Dialogs.close(dialogID);
More API strategies.
Dialogs.toggle(dialogID); Dialogs.destroy(dialogID); Dialogs.create();
Accessible Modal Dialog Component, A11y Dialog Component Plugin/Github
See Demo And Download
Official Website(jonathanlevaillant): Click Here
This superior jQuery/javascript plugin is developed by jonathanlevaillant. For extra Advanced Usages, please go to the official website.
Be First to Comment