Svelte Modal for Bootstrap 4

modal.svelte

<script>
  import { createEventDispatcher } from 'svelte'

  const dispatch = createEventDispatcher()

  export let open = false

  export let title = ''

  export let showHeader = true

  export let showFooter = true

  export let size = 'sm'

  $: if (open) {
    document.body.style.overflow = 'hidden'
  } else {
    document.body.style.overflow = ''
  }

  const close = () => dispatch('close')

  const handleClick = evt => {
    if (
      evt.target &&
      evt.target.classList &&
      evt.target.classList.contains('modal')
    ) {
      dispatch('close')
    }
  }
</script>

<div
  class:d-block={open}
  class="modal"
  tabindex="-1"
  role="dialog"
  on:click|stopPropagation={handleClick}>
  <div
    class="modal-dialog"
    class:modal-sm={size === 'modal-sm'}
    class:modal-md={size === 'modal-md'}
    class:modal-lg={size === 'modal-lg'}
    class:modal-xlg={size === 'modal-xlg'}
    role="document">
    <div class="modal-content">
      <div class="modal-header">
        {#if showHeader}
          <h5 class="modal-title">{title}</h5>
        {/if}
        <button
          on:click={close}
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <slot name="content" />
      </div>
      {#if showFooter}
        <div class="modal-footer">
          <slot name="footer" />
        </div>
      {/if}
    </div>
  </div>
</div>

<div
  class="modal-backdrop fade"
  class:d-block={open}
  class:d-none={!open}
  class:show={open} />