Author: | imhvost |
---|---|
Views Total: | 27 views |
Official Page: | Go to website |
Last Update: | September 26, 2023 |
License: | MIT |
Preview:

Description:
A minimal, flexible, configurable, accessible modal window built using plain JavaScript.
Inspired by Bootstrap’s Modal component.
More Features:
- Inspired by Bootstrap’s Modal component.
- Blurs the background content when the modal is opened.
- Multiple modal instances on a page.
- Locks the page when the modal is opened.
- Dismisses the modal on click outside.
- 7 CSS3 animations: slide, fade, zoom, etc.
How to use it:
1. Insert the accessible-minimodal.min.js script into the HTML page and we’re ready to go.
<script src="accessible-minimodal.min.js"></script>
2. Add content to the modal window as follows. Be sure to add role="dialog"
, aria-modal="true"
, and aria-labelledby
attributes to the modal window for accessibility.
<div id="modal-example" aria-hidden="true" class="modal" style="display:none;"> <div tabindex="-1" class="modal-wrapp"> <div role="dialog" aria-modal="true" aria-labelledby="modal-open-btn-example" class="modal-body"> <div class="modal-title">This is a modal</div> <button type="button" class="modal-close-btn close" aria-label="Close Modal" data-modal-close></button> <label aria-label="Input"> <input type="text" placeholder="Input"> </label> <label aria-label="Input"> <input type="text" placeholder="Input"> </label> <button>Button</button> </div> </div> </div>
3. Create a button to launch the modal when needed.
<button id="modal-open-btn-example" data-modal-open="modal-example">Open Modal</button>
4. Initialize the modal library and done.
const modal = AccessibleMinimodal.init({ // options here })
5. Customize the modal window with the following options:
const modal = AccessibleMinimodal.init({ // default CSS selectors classes: { modal: 'modal', wrapp: 'modal-wrapp', body: 'modal-body', active: 'active' }, disableScroll?:{ use: true, jumpingElements: '', }; // disable page scroll when activated disableScroll: true, // auto move focus to the modal on page load focus: true, hash: { open: false, add: false, remove: false }, // allows for multiple modal instances multiple: false, multipleClosePrev: true, // closes the modal on click outside outsideClose: true, // custom styles here style: { use: true, width: 400, valign: 'center', // center, top, bottom openAnimation: 'from-bottom', // // from-bottom, from-top, from-left, from-right, zoom-in, zoom-out, fade animationDuration: 400 }, // selectors of triggers triggers: { open: 'data-modal-open', close: 'data-modal-close' } })
6. Callback functions
const modal = AccessibleMinimodal.init({ on: { beforeOpen: function (instance) {}, afterOpen: function (instance) {}, beforeClose: function (instance) {}, afterClose: function (instance) {} }, })
7. API methods.
modal.openModal('my-modal') modal.closeModal('my-modal') modal.closeModal() modal.closeAllModals()
8. Events.
document .getElementById('modal') ?.addEventListener('accessible-minimodal:before-open', () => { // do something }); document .getElementById('modal') ?.addEventListener('accessible-minimodal:after-open', () => { // do something }); document .getElementById('modal') ?.addEventListener('accessible-minimodal:before-close', () => { // do something }); document .getElementById('modal') ?.addEventListener('accessible-minimodal:after-close', () => { // do something });
Changelog:
v2.2.1 (09/26/2022)
- bugfixes
v2.2.0 (08/20/2022)
- add disableScroll jumpingElements option
v2.1.0 (08/20/2022)
- add events to modal element
v2.0.23 (08/02/2022)
- add callback to methods
v2.0.22 (06/23/2022)
- focus selectors fix
v2.0.21 (06/21/2022)
- bugfix
v2.0.16 (05/17/2022)
- bugfix
v2.0.14 (05/17/2023)
- update
v2 (04/28/2023)
- update
v1.3.6 (09/11/2022)
- update
v1.3.5 (08/31/2022)
- export fix
v1.3.4 (05/11/2022)
- focus fix
v1.3.3 (02/01/2022)
- beforeOpen fix
v1.3.2 (12/16/2021)
- outsideClose fix
v1.3.0 (11/02/2021)
- add method closeAllModals
v1.2.0 (11/01/2021)
- multipleClosePrev
v1.1.13 (10/31/2021)
- Update
v1.1.9 (08/12/2021)
- registerTriggers fix
v1.1.8 (08/04/2021)
- Bugfix
- Remove console log
v1.1.6 (07/14/2021)
- getScrollbarWidth() fix
v1.1.5 (05/01/2021)
- classes fix
v1.1.4 (03/30/2021)
- fix closeModal
v1.1.3 (02/08/2021)
- fix changeFocus
v1.1.0 (02/07/2021)
- Update
v1.0.11 (01/11/2021)
- Fix outsideClose
12/30/2020
- change currentTarget
- change event.target
10/11/2020
- default hash change to false