Modal

Svelte

<script>
  let modalIsOpen = false
  const onClose = () => (modalIsOpen = false)
</script>

<Btn on:click="{() => (modalIsOpen = true)}">open modal</Btn>

{#if modalIsOpen}
<Modal on:close="{() => (modalIsOpen = false)}" appear blurBG>
  <!-- content -->
</Modal>
{/if}

Customize CSS

#modal {
  --modal-bg: hsla(0, 0%, 0%, 0.75);
}