I have added Modal to my Sveltekit Application from official example given at https://svelte.dev/examples/modal
My Modal.svelte is
<script> export let showModal; // boolean let dialog; // HTMLDialogElement $: if (dialog && showModal) dialog.showModal();</script><!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions --><dialog bind:this={dialog} on:close={() => (showModal = false)} on:click|self={() => dialog.close()}><!-- svelte-ignore a11y-no-static-element-interactions --><div on:click|stopPropagation><button style="float: right; font-weight: bold;" autofocus on:click={() => dialog.close()}>×</button><slot name="header" /><slot /></div></dialog><style> dialog { max-width: 32em; border-radius: 0.2em; border: none; padding: 0; } dialog::backdrop { background: rgba(0, 0, 0, 0.3); } dialog > div { padding: 1em; } dialog[open] { animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes zoom { from { transform: scale(0.95); } to { transform: scale(1); } } dialog[open]::backdrop { animation: fade 0.2s ease-out; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } button { display: block; }</style>My App.svelte is
<script> // @ts-nocheck import Modal from './Modal.svelte'; let cancelRequestId; let showModal = false; function cancleRequest(id) { showModal = true; cancelRequestId = id; } async function processCancleRequest() { showModal = false }</script><div><Modal bind:showModal><h1 slot="header" style="font-weight: bold;">Request Confirmation</h1><hr /><p>Are you sure want to proccess request?</p><br /><div style="display: flex; justify-content: space-between;"><button>No</button><button on:click={processCancleRequest}>Yes</button></div></Modal></div><button on:click={() => cancleRequest(item.id)}></button>On clicking Yes button I am setting showModal = false but still Modal is not getting closed.
What I am missing to make it work?
