<script>
import Modal from './Modal.svelte'
let open = false
</script>
<svelte:head>
<link rel="stylesheet" href="https://unpkg.com/mvp.css">
</svelte:head>
<main>
<h1>Svelte Modal Example</h1>
<p>This is a simple example of a modal dialog within a svelte application.</p>
<p>There are many ways to create modals, even some browsers support modals natively, but this example showcases the power and flexibilty of Svelte.</p>
<button on:click|preventDefault={_ => open = true}>Open Modal</button>
<pre>
<code>
{`
<script>
import { createEventDispatcher } from 'svelte'
import { scale } from 'svelte/transition'
export let open = false
const dispatch = createEventDispatcher()
function handleCloseClick() {
dispatch('close')
}
</script>
{#if open}
<div on:click={handleCloseClick}>
<section>
<aside in:scale out:scale={{duration: 500}}>
<slot />
<br />
<button on:click|preventDefault={handleCloseClick}>Close</button>
</aside>
</section>
</div>
{/if}