Html Question posted in
Some basic documentation can be found here.

Html – Official example Svelte modal component is not closing from parent component in SvelteKit project

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()}>&times;</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?

Tags:

2

Answers


  1. 0

    There is no code for closing the modal there, just opening.
    You could do something like this in the component:

    $: if (dialog) {
    showModal ? dialog.showModal() : dialog.close();
}
    Login or Signup to reply.
  2. 0

    on Model.svelte you can change

    let dialog; // HTMLDialogElement

    to

    export let dialog; // HTMLDialogElement

    And then in your App.svelte you can bind the dialog element and then do .close() on it from the App side

    <script>
    import Modal from './Modal.svelte';

    let showModal = false;
    let dialog
</script>

<Modal bind:showModal bind:dialog>
    <button on:click={()=>dialog.close()}>Yes</button>
</Modal>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search