This time I will share jQuery Plugin and tutorial about Simple and Accessible Modal Plugin with jQuery and HTML5, hope it will help you in programming stack.
| File Size: | 7.54 KB |
|---|---|
| Views Total: | 4299 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A simple, flexible and accessible jQuery / HTML5 modal dialog plugin which uses ARIA attributes and roles to provide a universal experience on various screen readers and devices. Based on HTML5 data attributes and dialog element.
Basic usage:
1. Include jQuery library and the jQuery Accessible Modal Window plugin on the web page when needed.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="jquery-accessible-modal-window-aria.js"></script> |
2. Create a link to launch a modal dialog that loads content from inline text using data-modal-text attribute.
1 |
<a href="#" class="js-modal" |
2 |
data-modal-text="Modal Content" |
3 |
data-modal-title="Modal Title" |
4 |
data-modal-close-text="Close" |
5 |
data-modal-close-title="Close this modal"> |
6 |
Click me |
7 |
</a> |
3. Create a button to launch a modal dialog that loads content from inline elements wrapped in a DIV element with an unique ID.
1 |
<button class="js-modal" |
2 |
data-modal-content-id="modal-id" |
3 |
data-modal-title="Modal Title" |
4 |
data-modal-close-text="Close" |
5 |
data-modal-close-title="Close this modal"> |
6 |
Click me |
7 |
</button> |
8 |
9 |
<div id="modal-id" class="hidden">Modal Content</div> |
4. Apply your own CSS styles to the modal dialog.
1 |
<a href="#" class="js-modal" |
2 |
data-modal-text="Modal Content" |
3 |
data-modal-title="Modal Title" |
4 |
data-modal-close-text="Close" |
5 |
data-modal-close-title="Close this modal"> |
6 |
Click me |
7 |
</a> |
5. When you open the modal, the class no-scroll is added on the body. If you want to remove scroll, add the following CSS snippet to your CSS.
1 |
.no-scroll { |
2 |
overflow: hidden; |
3 |
} |
6. All HTML5 data attributes.
data-modal-text: modal textdata-modal-content-id: modal IDdata-modal-title: modal titledata-modal-close-text: text for close buttondata-modal-close-title: title attribute of close buttondata-modal-background-click="disabled": disable the possibility to click outside the modal window to close it.data-modal-close-img: a path to a valid image for the close buttondata-modal-focus-id: when opening a modal, provides focus to the matching IDdata-modal-aria-modal: adds attributes aria-modal=”true” to the code of the modal.data-modal-remove-role-dialog: removes role=”dialog” of the code of the modaldata-modal-use-role-alertdialog: instructs the modal to use role=”alertdialog”data-modal-remove-dialog-tag: instructs the modal to use div instead of using dialog tag
Changelog:
2020-11-25
- v1.11.1
2019-09-01
- v1.11.0
2019-08-28
- Don’t list hidden type inputs in focus trap
2018-03-22
- Add class <prefix>-modal__wrapper to container (role=”document”)
2017-12-24
- Add class=”js-modal-close” (on any element) to close modal
2017-09-09
- Added several options to create different modals
2017-08-19
- Fix issue on VO/Mac
2017-07-11
- js update
2017-06-09
- Add attribute data-modal-focus-id
2017-06-08
- Add attribute aria-haspopup
2017-05-16
- Update text on modal overlay
2017-03-23
- Add aria-modal=”true” to dialog element
2017-03-22
- Fix selector bug (issue with jQuery 2.x/3.x)
2017-03-19
- Added attribute data-modal-close-img (image for close button)
2017-03-06
- Add type=”button” to button
2017-02-18
- Fixed a bug in variables
2016-11-03
- Fixed a bug in variables
2016-10-21
- Fixed a bug in variables
2016-04-19
- Added class for close text
2016-04-17
- Fixed duplicate id in content modal
2016-02-13
- indentation fix
2016-02-05
- Big refactoring
2015-12-17
- Add possibility to remove scroll on body when modal is opened
