Modal (popup window)

<script>
  import { Button, Checkbox, Modal } from "@fanny-pack-ui/svelte-kit";

  let showModal = false;
  let savingEdits = false;
  let enableScrollingBody = true;

  function handleSaveData() {
    savingEdits = true;
    setTimeout(() => savingEdits = false, 3000);
  }
</script>

<Button btnIcon="" on:click={() => showModal = true}>Click To Show Modal</Button>
<br>
<Checkbox bind:checked={enableScrollingBody} label="Enable `scrollingBody` prop" />

{#if showModal}
  <Modal
    title="Modal Title"
    scrollingBody={enableScrollingBody}
    disabled={savingEdits}
    on:closeModal={() => showModal = false}
    --custom-modal-header-padding-mobile="5px"
    --custom-modal-header-padding-desktop="15px"
    --custom-modal-footer-padding-mobile="5px"
    --custom-modal-footer-padding-desktop="15px"
  >
    <div slot="modalBody" class="modal-body">
      <div>Modal body text goes here...</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>
    <div slot="modalFooterLeft">
      <Button
        btnIcon="ion:save-sharp"
        disabled={savingEdits} 
        on:click={handleSaveData}
      >
        Save Data
        <span slot="btnTextDisabled">Saving Data...</span>
      </Button>
    </div>
    <div slot="modalFooterRight">
      <Button>Another Footer Button</Button>
      <Button btnIcon="mdi:close" disabled={savingEdits} on:click={() => showModal = false}>Close</Button>
    </div>
  </Modal>
{/if}

<style>
  @media (--xs-up) {
    .modal-body {
      padding: 5px;
    }
  }

  @media (--lg-up) {
    .modal-body {
      padding: 15px;
    }
  }
</style>

Exclude Modal Header or Footer

You can exclude the modal header by leaving out the title prop.

You can exclude the modal footer by leaving out the modalFooterLeft and modalFooterRight slots.

<script>
  import { Button, Modal } from "@fanny-pack-ui/svelte-kit";

  let showModalBody = false;
</script>

<Button btnIcon="" on:click={() => showModalBody = true}>Click To Show Modal Without Header or Footer</Button>
<br>

{#if showModalBody}
  <!-- No `title` prop -->
  <Modal
    disabled={savingEdits}
    on:closeModal={() => showModalBody = false}
  >
    <div slot="modalBody" style="padding: 10px;">
      <div>This modal only has a body (i.e. there is no header or footer included).</div>
      <h3>I can put header tags inside this modal</h3>
      <p id="custom-p">I can put any custom styled content inside this modal</p>
    </div>
    <!-- No `modalFooterLeft` or `modalFooterRight` slots -->
  </Modal>
{/if}

<style>
  #custom-p {
    font-size: 2rem;
    line-height: 2rem;
  }
</style>

You can put almost anything inside of a modal body:

<script>
  import { Button, Modal } from "@fanny-pack-ui/svelte-kit";

  let showLoginModal = false;
  let loggingIn = false;
</script>

<Button btnIcon="" on:click={() => showLoginModal = true}>Show Login Modal</Button>
<br>

{#if showLoginModal}
  <Modal
    showCloseButton={false}
    on:closeModal={() => showLoginModal = false}
  >
    <div slot="modalBody">
      <LoginForm 
        on:login={(event) => loggingIn = event.detail} 
        on:authenticated={() => showLoginModal = false}
        on:cancel={() => showLoginModal = false}
      />
    </div>
  </Modal>
{/if}

NOTE: You can dispatch events that will trigger the modal to be closed. For example, in the code above, a cancel event is dispatched with dispatch("cancel"). The <LoginForm> listens for the on:cancel event and closes the modal.

Custom Modal Style Props

The content that you pass to the modalBody slot can be completely custom - both the content and styles. The modal header and modal footer can also be styled to fit your needs with these style props.

Props

Slots

NOTE: The footer is designed to contain buttons. You can include as many footer buttons as you want as long as they fit the footer space without spilling over.

Event Forwarding