Created click outside action event.

src/lib/Modal.svelte

@@ -1,8 +1,10 @@
 <script>
 	import { fly, fade } from 'svelte/transition';
 	import Portal from './Portal.svelte';
+	import { clickOutside } from './clickOutside';
 
 	export let isModalOpen = false;
+	export let background = true;
 
 	function closeModal() {
 		isModalOpen = false;
@@ -11,11 +13,18 @@
 
 {#if isModalOpen}
 	<Portal>
-		<div class="modal-wrapper" transition:fly={{ opacity: 0, y: 100 }}>
+		<div
-			<button on:click={closeModal} aria-label="Close Modal Box">Close</button>
+			use:clickOutside
+			on:click-outside={closeModal}
+			class="modal-wrapper"
+			transition:fly={{ opacity: 0, y: 100 }}
+		>
+			<button class="close-btn" on:click={closeModal} aria-label="Close Modal Box">Close</button>
 			<slot />
 		</div>
-		<div on:click={closeModal} transition:fade class="background" />
+		{#if background}
+			<div on:click={closeModal} transition:fade class="background" />
+		{/if}
 	</Portal>
 {/if}
 
@@ -37,4 +46,10 @@
 		position: fixed;
 		z-index: 100;
 	}
+
+	.close-btn {
+		position: absolute;
+		top: -10px;
+		right: -10px;
+	}
 </style>

src/lib/clickOutside.js

@@ -0,0 +1,16 @@
+export function clickOutside(node) {
+  function handleClick(event) {
+    if(node && !node.contains(event.target) && !event.defaultPrevented) {
+      node.dispatchEvent(
+        new CustomEvent('click-outside')
+      )
+    }
+  }
+  document.addEventListener('click', handleClick, true);
+
+  return {
+    destroy() {
+      document.removeEventListener('click', handleClick, true);
+    }
+  }
+}

src/routes/index.svelte

@@ -19,7 +19,7 @@
 
 <h1>Welcome to Level Up UI {search}</h1>
 
-<Modal {isModalOpen}>
+<Modal bind:isModalOpen background={true}>
 	<div style="background: white; box-shadow: 1px 1px 4px rgba(0,0,0,0.3);">
 		<Field bind:value={search} label="Search" insrustions="Type to search" placeholder="Joe" />
 		<Field value={0} label="Number" type="number" />
@@ -34,7 +34,7 @@
 	>Error Message</button
 >
 
-<!-- <button on:click={() => (isModalOpen = true)}>Open Modal Form</button> -->
+<button on:click={() => (isModalOpen = true)}>Open Modal Form</button>
 
 <SearchFilter {items} bind:search />