How to Create a Modal in Svelte: Simple Guide

To create a modal in Svelte, use a boolean variable to control its visibility and conditionally render the modal markup with {#if}. Use event handlers to open and close the modal by changing this variable.

Syntax

A modal in Svelte is typically created by using a boolean variable to track if the modal is open or closed. The modal content is wrapped inside a {#if} block that shows or hides it based on this variable. Buttons or other elements use on:click events to toggle the variable.

This pattern keeps the modal markup in the component and controls its visibility reactively.

svelte

let showModal = false;

<button on:click={() => showModal = true}>Open Modal</button>

{#if showModal}
  <div class="modal">
    <div class="modal-content">
      <button on:click={() => showModal = false}>Close</button>
      <p>This is the modal content.</p>
    </div>
  </div>
{/if}

Output

A button labeled 'Open Modal'. When clicked, a modal box appears with text and a 'Close' button. Clicking 'Close' hides the modal.

Example

This example shows a complete Svelte component that opens a modal when you click a button and closes it when you click the close button or outside the modal content.

svelte

<script>
  let showModal = false;

  function openModal() {
    showModal = true;
  }

  function closeModal() {
    showModal = false;
  }

  function clickOutside(event) {
    if (event.target.classList.contains('modal')) {
      closeModal();
    }
  }
</script>

<button on:click={openModal}>Open Modal</button>

{#if showModal}
  <div class="modal" on:click={clickOutside} aria-modal="true" role="dialog" tabindex="-1">
    <div class="modal-content" on:click|stopPropagation>
      <button on:click={closeModal} aria-label="Close modal">Close</button>
      <p>This is the modal content.</p>
    </div>
  </div>
{/if}

<style>
  .modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .modal-content {
    background: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    max-width: 400px;
    width: 90%;
  }
  button {
    cursor: pointer;
  }
</style>

Output

A page with an 'Open Modal' button. Clicking it shows a centered white box with text and a 'Close' button on a dark transparent background. Clicking outside the box or the 'Close' button hides the modal.

Common Pitfalls

• Not using a boolean variable to control modal visibility can cause the modal to always show or never show.
• Forgetting to stop event propagation when clicking inside the modal content can cause the modal to close unintentionally.
• Not adding keyboard accessibility (like focus trapping or escape key handling) can make the modal hard to use for keyboard users.

svelte

<!-- Wrong: modal always visible -->
<div class="modal">
  <p>Modal content</p>
</div>

<!-- Right: modal visibility controlled by boolean -->
{#if showModal}
  <div class="modal">
    <p>Modal content</p>
  </div>
{/if}

Quick Reference

Use these tips when creating modals in Svelte:

• Control modal visibility with a let boolean variable.
• Use {#if} block to conditionally render the modal.
• Use on:click events to open and close the modal.
• Add a semi-transparent background to focus user attention.
• Ensure accessibility with aria-modal and keyboard support.

Key Takeaways

Use a boolean variable and {#if} block to show or hide the modal in Svelte.

Control modal open/close with on:click event handlers on buttons or background.

Add a semi-transparent overlay and center modal content for clear focus.

Remember accessibility: use aria attributes and keyboard controls.

Avoid rendering modal markup without conditional logic to prevent always visible modals.