accessible-minimodal
Accessible, lightweight (< 8 kB), stylish modal library in pure JavaScript
Example
https://codepen.io/imhvost/pen/LYNazqo (with "multiple" option)
Install
npm
npm install accessible-minimodal --save
or include scripts
<script src="accessible-minimodal.min.js"></script>
html
Open button:
<button id="modal-open-btn-1" data-modal-open="modal-1">Open Modal 1</button>
Modal:
<div id="modal-1" 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-1" class="modal-body">
<button type="button" class="modal-close-btn" aria-label="Close Modal" data-modal-close></button>
Modal content
</div>
</div>
</div>
js
const modal = AccessibleMinimodal.init({
animationDuration: 400,
classes: {
modal: 'modal',
wrapp: 'modal-wrapp',
body: 'modal-body',
active: 'active',
open: 'open',
close: 'close'
},
disableScroll: true,
focus: true,
hash: {
open: true,
add: true,
remove: true
},
multiple: false,
multipleClosePrev: true,
on: {
beforeOpen: function (instance) {},
afterOpen: function (instance) {},
beforeClose: function (instance) {},
afterClose: function (instance) {}
},
outsideClose: true,
style: {
use: true,
width: 400,
valign: 'center', // center, top, bottom
animation: 'from-bottom', // from-bottom, from-top, from-left, from-right, zoom-in, zoom-out, fade
},
triggers: {
open: 'data-modal-open',
close: 'data-modal-close',
closeAll: 'data-modal-close-all'
}
})
methods
Open by id
modal.openModal('my-modal')
Close by id
modal.closeModal('my-modal')
Close current
modal.closeModal()
Close all
modal.closeAllModals()
Get scrollbar width
Example of preventing displacement of position:fixed elements when scrolling is disabled:
const modal = AccessibleMinimodal.init({
on: {
beforeOpen: modal => {
const scrollbarWidth = modal.getScrollbarWidth()
document.querySelector('.header').style.marginRight = `${scrollbarWidth}px`
},
afterClose: () => document.querySelector('.header').style.marginRight = 0
}
})
91 Dec 16, 2022
261 Nov 30, 2022
5 Oct 23, 2022
14 Dec 24, 2022
5 Dec 26, 2022
25 Jan 1, 2023
8 Dec 5, 2022
7 Oct 29, 2022
3 Oct 8, 2020
8 Jun 20, 2022
4 Nov 10, 2022
59 Oct 8, 2022
205 Jan 7, 2023
2.7k Dec 26, 2022
19 Nov 17, 2022
10 Jan 8, 2023
5 Dec 20, 2022
135 Nov 28, 2022
5 Mar 15, 2022