<script>

import Modal from "https://cdn.skypack.dev/@jwrunge/modal/dist/Modal.svelte"

let modalOpen = false

</script>

<h1>Try out Easy Modal!</h1>

<p>This is an example Svelte component integration. You can implement via standard JavaScript, too!</p>

<p>Refer to the <a href="https://github.com/jwrunge/svelte-modal" target="_blank">GitHub</a> or <a href="https://www.npmjs.com/package/@jwrunge/modal" target="_blank">NPM documentation</a> for maximum funtimes in this REPL!</p>

<button on:click={()=>modalOpen = true}>Open the modal!</button>

{#if modalOpen == true}

<Modal on:close={()=>modalOpen = false}>

<h2>Cool modal. man!</h2>

<p>And it's so easy to use!</p>

<div class="buttons">

<button class='red' on:click={()=>modalOpen = false}>Close me!</button>

<button on:click={()=>alert("Hey! Here's your alert. :-)")}>Alert me!</button>

</div>

</Modal>

{/if}

<style>

/* Styling is MUCH more configurable than this, but Svelte's REPL isn't playing nice with customizations. Go ahead and install @jwrunge/modal and play around with styling! */

@import "https://cdn.skypack.dev/@jwrunge/modal/dist/modalstyle.css";

button {

padding: .25em .5em;

border-radius: 5px;

font-size: .75em;

}

button.red {