|
@@ -23,12 +23,17 @@
|
|
|
};
|
|
|
|
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
|
- if (event.key === 'Escape') {
|
|
|
+ if (event.key === 'Escape' && isTopModal()) {
|
|
|
console.log('Escape');
|
|
|
show = false;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+ const isTopModal = () => {
|
|
|
+ const modals = document.getElementsByClassName('modal');
|
|
|
+ return modals.length && modals[modals.length - 1] === modalElement;
|
|
|
+ };
|
|
|
+
|
|
|
onMount(() => {
|
|
|
mounted = true;
|
|
|
});
|
|
@@ -38,8 +43,8 @@
|
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
|
document.body.style.overflow = 'hidden';
|
|
|
} else if (modalElement) {
|
|
|
- document.body.removeChild(modalElement);
|
|
|
window.removeEventListener('keydown', handleKeyDown);
|
|
|
+ document.body.removeChild(modalElement);
|
|
|
document.body.style.overflow = 'unset';
|
|
|
}
|
|
|
</script>
|
|
@@ -49,7 +54,7 @@
|
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
|
<div
|
|
|
bind:this={modalElement}
|
|
|
- class=" fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center z-[9999] overflow-hidden overscroll-contain"
|
|
|
+ class="modal fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center z-[9999] overflow-hidden overscroll-contain"
|
|
|
in:fade={{ duration: 10 }}
|
|
|
on:mousedown={() => {
|
|
|
show = false;
|