OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-05-31 11:00:49 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix: modal esc

Browse Source
This commit is contained in:
Timothy J. Baek 2024-06-24 17:39:43 -07:00
parent 503d16f49c
commit bf4dcc10af
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/components/common/Modal.svelte
View File

@ -23,12 +23,17 @@
}; };
const handleKeyDown = (event: KeyboardEvent) => { const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') { if (event.key === 'Escape' && isTopModal()) {
console.log('Escape'); console.log('Escape');
show = false; show = false;
} }
}; };
const isTopModal = () => {
const modals = document.getElementsByClassName('modal');
return modals.length && modals[modals.length - 1] === modalElement;
};
onMount(() => { onMount(() => {
mounted = true; mounted = true;
}); });
@ -38,8 +43,8 @@
window.addEventListener('keydown', handleKeyDown); window.addEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
} else if (modalElement) { } else if (modalElement) {
document.body.removeChild(modalElement);
window.removeEventListener('keydown', handleKeyDown); window.removeEventListener('keydown', handleKeyDown);
document.body.removeChild(modalElement);
document.body.style.overflow = 'unset'; document.body.style.overflow = 'unset';
} }
</script> </script>
@ -49,7 +54,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
bind:this={modalElement} 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 }} in:fade={{ duration: 10 }}
on:mousedown={() => { on:mousedown={() => {
show = false; show = false;