You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
918 B
35 lines
918 B
let modal: HTMLElement | null = null;
|
|
|
|
function openModal(event: Event) {
|
|
event.preventDefault();
|
|
const el = document.querySelector((event.target as HTMLElement).getAttribute('href')!)! as HTMLElement;
|
|
// @ts-expect-error reset
|
|
el.style.display = null;
|
|
el.removeAttribute('hidden');
|
|
el.setAttribute('aria-modal', 'true');
|
|
modal = el;
|
|
modal.addEventListener('click', closeModal);
|
|
}
|
|
|
|
function closeModal(event: Event) {
|
|
event.preventDefault();
|
|
if (modal === null) {
|
|
return;
|
|
}
|
|
modal.style.display = 'none';
|
|
modal.setAttribute('hidden', 'hidden');
|
|
modal.removeAttribute('aria-modal');
|
|
modal.removeEventListener('click', closeModal);
|
|
modal = null;
|
|
}
|
|
|
|
document.querySelectorAll('.open-modal').forEach((el) => {
|
|
el.addEventListener('click', openModal);
|
|
});
|
|
|
|
window.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Escape' && modal !== null) {
|
|
closeModal(event);
|
|
}
|
|
});
|