svelte-easy-modal

Install

1npm install --save svelte-easy-modal

Usage

Import the Modal component into your main app component (e.g., App.svelte).

1<!-- App.svelte -->
2
3<script>
4  import Modal from 'svelte-easy-modal';
5  let showModal = false;
6  import Popup from './popup.svelte';
7  $: console.log(showModal);
8</script>
9
10<main>
11  <Modal
12    showHeader={true}
13    showClose={true}
14    outsideClose={true}
15    insideClose={true}
16    bind:showModal
17  >
18    <h1 slot="header">Header</h1>
19    <Popup />
20  </Modal>
21  <button on:click={() => (showModal = !showModal)}> OPEN MODAL </button>
22</main>
23
24<!-- popup.svelte -->
25
26<main class="main">
27  <h1>this is Popup</h1>
28  <button>Close inside button</button>
29</main>
30
31<style>
32  .main {
33    width: 400px;
34    height: 200px;
35    display: flex;
36    flex-direction: column;
37    justify-content: center;
38    align-items: center;
39  }
40
41  button {
42    width: 150px;
43    height: 60px;
44    font-size: 1.1rem;
45    font-weight: bold;
46  }
47</style>
48

API

Component API

The <Modal /> component accepts the following optional properties:

Property	Type	Default	Description
showModal	boolean	null	to toggle the Modal.
insideClose	boolean	false	to close the modal from a inside button.
outsideClose	boolean	false	self close modal.
showHeader	boolean	true	to show the header.
showClose	boolean	true	to show the close butten in the header.