How to show and hide a modal in Svelte

What is a modal?

A web page element displayed in front of the current page is known as a modal. Once the modal is displayed, the user must interact with it to return to the parent component.

Implementation

Let’s look at how we can create a modal in Svelte.

Create a `Modal.svelte` file

First, you need to create a Modal.svelte file and add the following code:

<script>
  export let isOpen = false;
  export let onClose;
  function closeModal() {
    onClose();
  }
</script>
<div class="modal" class:open={isOpen} on:click={closeModal}>
  <div class="popup">
    <div class="popup-content">
      <slot></slot>
    </div>
    <button class="close-button" on:click={closeModal}>Close</button>
  </div>
</div>
<style>
  .modal {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
  }
  .open {
    display: flex;
  }
  .popup {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    text-align: center;
  }
  .popup-content {
    margin-bottom: 10px;
  }
  .close-button {
    padding: 8px 16px;
    border-radius: 4px;
    background-color: #e53935;
    color: #fff;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .close-button:hover {
    background-color: #c62828;
  }
</style>

Line 10: The Modal component receives two props: isOpen (which controls the visibility of the modal) and onClose() (a callback function executed when the modal is closed).
Line 13: The <slot></slot> inserts content that is passed from the parent component (in this case, it is the App component) into the modal.
Lines 10 and 21: The .modal class is set to display:none to hide the modal initially.
Lines 10 and 34: When isOpen is set to true, the .open class sets the display:flex.
Lines 15 and 6: We click the “Close” button of the modal calls, closeModal(). This triggers the onClose() callback passed from the App component.

Update App.svelte file

Then, you need to update the App.svelte file with the following code:

Lines 6–8: In the App component, the toggleModal() function toggles the showModal variable when the Open Modal button is clicked.
Line 10: The popupContent variable stores content to be displayed in the modal.
Lines 19–21: The Modal component is used in the App component and receives isOpen and onClose() as props, and the popupContent is passed as the content for the modal.
Lines 12–13: When the modal is closed, the closeModal() function sets showModal() to false.

Final implementation