moodlejs
v1.0.6
Published
An accessible modal that follow the WebAim standards.
Downloads
8
Readme
MoodleJS
An accessible modal that follows the WebAim standards.
Features
- Uses a keyboard trap when user has selected open modal
- When you get to the last focusable element it will go back to the first
- When you
shift + taband you're on the first focusable element you will go to the last - Uses
aria-labelledby&aria-describedbyfor title and text fields. - Sets focus on first focuable element when opened.
- Resets focus on the previous element when closing the modal.
Usage
This is the basic example for having multiple products working with one modal.
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World Heading.</h1>
<a href="" data-product data-modal-button="">
<h2 data-product-heading>Product One</h2>
<p data-product-detail>Product one detail</p>
</a>
<a href="" data-product data-modal-button="">
<h2 data-product-heading>Product Two</h2>
<p data-product-detail>Product Two detail</p>
</a>
<div class="modal" data-modal="" aria-labelledby="modalTitle" aria-describedby="modalText" role="dialog" tabindex="-1">
<h2 id="modalTitle" data-modal-title=""></h2>
<p id="modalText" data-modal-intro=""></p>
<div data-modal-body=""></div>
<button data-modal-close="">Close</button>
</div>
<div class="modal__overlay" data-modal-overlay></div>
</body>
</html>
CSS
Here is just the baseline to having the modal sit infront of the content & the overlay to sit behind.
.modal__overlay {
background: rgba(0, 0, 0, 0.5);
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
z-index: 2;
width: 100%;
}
.modal--open .modal,
.modal--open .modal__overlay {
display: block;
}
.modal {
background: white;
border-radius: 5px;
display: none;
left: 50%;
padding: 20px;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
z-index: 3;
}JS
To create the modal all the have to do is use the new Moodle(); and the modal will handle the rest. For example:
(function() {
var modal = new Moodle();
var buttons = document.querySelectorAll('[data-modal-button]');
function showProductModal(event) {
event.preventDefault();
var currentElement = event.currentTarget;
var heading = currentElement.querySelectorAll('[data-product-heading]')[0].textContent;
var detail = currentElement.querySelectorAll('[data-product-detail]')[0].textContent;
var html = '';
modal.show(heading, detail, html);
}
buttons[1].addEventListener('click', showProductModal, false);
buttons[2].addEventListener('click', showProductModal, false);
}());Using with webpack
If you are using the module with webpack or some other bundler then you can do the following:
npm i moodlejs --save
Then in your js file you will have to require the module.
(function() {
var modal = require('moodlejs');
// Products example
var buttons = document.querySelectorAll('[data-modal-button]');
function showProductModal(event) {
event.preventDefault();
var currentElement = event.currentTarget;
var heading = currentElement.querySelectorAll('[data-product-heading]')[0].textContent;
var detail = currentElement.querySelectorAll('[data-product-detail]')[0].textContent;
var html = '';
modal.show(heading, detail, html);
}
buttons[1].addEventListener('click', showProductModal, false);
buttons[2].addEventListener('click', showProductModal, false);
}());Contributing
Feel free to suggest any ideas or improvments to the plugin. If you have any issues using it feel free to submit an issue.