svelte-scrim/docs/src/Demo.html

A vanilla JS scrim (backdrop) component made with Svelte.

<h1>svelte-scrim</h1>

<label>
  opacity
  <input type="number" step="0.1" bind:value="scrim.opacity" />
</label>

<label>
  backround
  <input type="color" bind:value="scrim.background" />
</label>

{{#if !scrimVisible}}
<button on:click="set({ scrimVisible: true })">Preview Scrim</button>
{{else}}
  <p>Press the scrim to dismiss it.</p>

  <div on:click="set({ scrimVisible: false })">
    <Scrim opacity="{{ scrim.opacity }}" background="{{ scrim.background }}" />
  </div>
{{/if}}
<svelte-scrim data-opacity="{{ scrim.opacity }}" data-background="{{ scrim.background }}" />

<script>
import Scrim from '../../'
import '../../element'

export default {
  components: { Scrim },

  data () {
    return {
      scrim: Object.assign({}, Scrim.DEFAULTS)
    }
  }
}
</script>