Add a modal for controls
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
877b162eaa
commit
e2022b409d
@ -0,0 +1,34 @@
|
||||
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);
|
||||
}
|
||||
});
|
Loading…
Reference in new issue