Fix backdrop with stacking visible modals

[romanzy313]

Previously if I wanted to stack modals, the backdrop would always be behind the first modal. Now it behaves properly if isOpen is not used. Behavior does not change when modals are not stacked.

I can add an example to the docs if needed

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
svelte-modals	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 3, 2023 9:39pm

[mattjennings]

Interesting. Could you provide the example? I would like to see the use case. isOpen is expected to be used for all modals. While you can ignore isOpen for showing the modal, it's not the intention, so YMMV with expected behaviour.

The backdrop is rendered outside is so that it mounts/unmounts once during the life of the stack (when the first one is opened/closed) for sake of intro/outro animations. With this change, I think this would cause the backdrop to mount/unmount every time the modal changes, and therefore replay intro/outro animations?

An alternative approach that might work for you: you could render the backdrops in your modal components instead and use isOpen to show/hide them. I think that would get you the same behaviour here without this change.

<script>
export let isOpen
</script>

{#if isOpen}
<Backdrop />
{/if}

<!-- ... rest of the modal -->

[mattjennings]

closing since this would replay any transitions on the backdrop slot when the top modal changes, which is not intended behaviour for this library.

this could alternatively be solved by adding z-indexes to the backdrop/modal based on modal index