22 lines
669 B
JavaScript
22 lines
669 B
JavaScript
// manages the behavior of modal several dialogs on a page: open / close buttons and light dismiss.
|
|
|
|
const buttons = document.querySelectorAll('button[data-index]');
|
|
const modals = document.querySelectorAll('dialog');
|
|
const closeButtons = document.querySelectorAll('dialog button');
|
|
buttons.forEach((button, index) => {
|
|
button.addEventListener('click', () => {
|
|
modals[index].showModal();
|
|
});
|
|
});
|
|
closeButtons.forEach((button, index) => {
|
|
button.addEventListener('click', () => {
|
|
modals[index].close();
|
|
});
|
|
});
|
|
window.addEventListener('click', event => {
|
|
modals.forEach(modal => {
|
|
if (event.target === modal) {
|
|
modal.close();
|
|
}
|
|
});
|
|
});
|