Modal is now a component.

public/global.css

@@ -13,6 +13,7 @@
     --color-secondary-accent: #888;
     --color-shadow: #ddd;
     --color-shadow-secondary: #fff;
+    --color-shadow-dark: #888;
     --color-bg-inverted: #555;
     --color-text: #000;
     --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

src/components/CodeBubble.svelte

@@ -4,6 +4,9 @@
   export let visible = false;
   export let url = "";
 
+  import { createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher();
+
   const hide_code_button = () => {
     if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       visible = false;
@@ -32,11 +35,9 @@
 
 {#if visible}
   <code-bubble>
-    <a transition:fade href={ url }>
-      <button>
-        <Icon name="code" size="32" />
-      </button>
-    </a>
+    <button transition:fade on:click={ () => dispatch('click') }>
+      <Icon name="code" size="32" />
+    </button>
   </code-bubble>
 {/if}
 

src/components/Modal.svelte

@@ -0,0 +1,44 @@
+<script>
+  import Icon from '../components/Icon.svelte';
+  import { fade } from 'svelte/transition';
+  export let visible = false;
+  import { createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher();
+</script>
+
+<style>
+  modal {
+    display: flex;
+    position: fixed;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    background: rgba(244,244,244,0.75);
+  }
+
+  modal-content {
+    flex-direction: column;
+    background: white;
+    box-shadow: 4px 4px 4px var(--color-shadow-dark);
+    border: 1px solid var(--color-accent);
+    border-radius: 5px;
+    max-height: 50vh;
+    min-height: 50vh;
+    max-width: 50vh;
+    width: 100%;
+    z-index: 20;
+    padding: 0.5rem;
+  }
+</style>
+
+{#if visible}
+  <modal on:click={ () => dispatch('click') }>
+  <modal-content>
+    <slot></slot>
+  </modal-content>
+  </modal>
+{/if}

src/demos/Twitter.svelte

@@ -2,8 +2,12 @@
   import { link } from 'svelte-spa-router';
   import Icon from '../components/Icon.svelte';
   import CodeBubble from '../components/CodeBubble.svelte';
+  import Modal from '../components/Modal.svelte';
   let tweets = [1,2,3,4,5];
-  export let thumbnail = false;
+  let modal_visible = true;
+
+  const toggle_modal = () => modal_visible = !modal_visible;
+
 </script>
 
 <style>
@@ -198,13 +202,11 @@
 
 
 <content>
-  {#if !thumbnail}
   <left>
   <Icon name="twitter" color="var(--color)" />
   <h4># Explore</h4>
   <h4><Icon name="settings" color="var(--color-text)" /> Settings</h4>
   </left>
-  {/if}
 
   <middle>
     <header>
@@ -235,7 +237,6 @@
       <p><Icon name="map" size="24" color="var(--color-bg-secondary)" /> Some Place, KY <Icon name="link" size="24" color="var(--color-bg-secondary)" /> <a>learnjsthehardway.org</a> <Icon name="calendar" size="24" color="var(--color-bg-secondary)" /> Joined Jan, 1999. </p>
       <p><b>167</b> Following <b>10.4k</b> Followers</p>
     </profile>
-    {#if !thumbnail}
 
     <hr>
 
@@ -261,10 +262,8 @@
       </tweet>
     {/each}
     </tweets>
-   {/if}
   </middle>
 
-  {#if !thumbnail}
   <right>
     <input placeholder="Search Twitter" />
 
@@ -321,7 +320,10 @@
     </section>
 
   </right>
-  {/if}
 </content>
 
-<CodeBubble url="https://git.learnjsthehardway.com/" />
+<CodeBubble url="https://git.learnjsthehardway.com/" on:click={ toggle_modal } />
+<Modal visible={modal_visible} on:click={ toggle_modal }>
+  <h1>Hi! This is Cool!</h1>
+</Modal>
+