modal

src/App.svelte

@@ -10,7 +10,8 @@
   import Toggle from "./widgets/Toggle.svelte";
   import Anydata from "./widgets/Anydata.svelte";
 
-  //import Modal from "svelte-simple-modal";
+  import Content from "./Content.svelte";
+  import Modal from "svelte-simple-modal";
 
   import Chart from "svelte-frappe-charts";
 
@@ -705,6 +706,9 @@
       <Route path="/about">
         <Card title={"Пример графика"}>
           <Chart data={datachart} type="line" />
+          <Modal>
+            <Content />
+          </Modal>
         </Card>
       </Route>
     </div>

src/Content.svelte

@@ -0,0 +1,13 @@
+<!-- Content.svelte -->
+<script>
+  import { getContext } from "svelte";
+  import Surprise from "./Surprise.svelte";
+
+  const { open } = getContext("simple-modal");
+
+  const showSurprise = () => {
+    open(Surprise, { message: "It's a modal!" });
+  };
+</script>
+
+<p><button on:click={showSurprise}>Show me a surprise!</button></p>

src/Surprise.svelte

@@ -0,0 +1,8 @@
+<!-- Surprise.svelte -->
+<script>
+  export let message;
+</script>
+
+<p>
+  🎉 {message} 🍾
+</p>