Click anywhere to dimiss Modal

Mantan21 · Feb 13, 2023 · 90753cb · 90753cb
1 parent b707eec
commit 90753cb
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/src/lib/components/shop/Donate.svelte b/src/lib/components/shop/Donate.svelte
@@ -12,6 +12,10 @@
 	let showCryptoModal = false;
 	let showToast = false;
 
+	let dimiss = () => {
+		showCryptoModal = false;
+	};
+
 	const copyHandle = (text) => {
 		playSfx();
 		copy(text);
@@ -33,9 +37,8 @@
 	button="confirm"
 	show={showCryptoModal}
 	title="Support With Crypto"
-	on:confirm={() => {
-		showCryptoModal = false;
-	}}
+	on:confirm={dimiss}
+	on:cancel={dimiss}
 >
 	<div class="modal-donate">
 		<div class="pop-item">

diff --git a/src/lib/components/shop/PaymentModal.svelte b/src/lib/components/shop/PaymentModal.svelte
@@ -22,6 +22,10 @@
 		playSfx('close');
 	};
 
+	const dimiss = () => {
+		dispatch('cancel');
+	};
+
 	const convertToPrimogem = () => {
 		const afterBuy = $primogem + qty + bonus;
 		primogem.set(afterBuy);
@@ -39,7 +43,7 @@
 	};
 </script>
 
-<Modal {show} confirm={false} sfx={false}>
+<Modal {show} confirm={false} sfx={false} on:cancel={dimiss}>
 	<Funds />
 	<div class="genesis-modal">
 		<div class="header">

diff --git a/src/lib/components/utility/ModalTpl.svelte b/src/lib/components/utility/ModalTpl.svelte
@@ -30,11 +30,20 @@
 		dispatch('cancel');
 		if (sfx) playSfx();
 	};
+
+	const dimiss = () => {
+		dispatch('cancel');
+	};
 </script>
 
 {#if show}
-	<div class="modal" transition:fade={{ duration: 80 }} style="height: {$viewportHeight}px;">
-		<div class="modal-content">
+	<div
+		class="modal"
+		transition:fade={{ duration: 80 }}
+		style="height: {$viewportHeight}px;"
+		on:click={dimiss}
+	>
+		<div class="modal-content" on:click|stopPropagation>
 			<span class="corner top-left" />
 			<span class="corner top-right" />
 			<span class="corner bottom-left" />