Skip to content
staticview

Dialog Non-Modal

Use non-modal for page interaction and backdrop-dismiss for outside-click dismissal. The transparent --sv-overlay keeps the page visible.

Example Non-Modal Dialog


This is a non-modal dialog. It does not block interaction with the rest of the page and behaves like a normal element. You can close it using the close button or by pressing the Escape key. Clicking outside the dialog will also dismiss it.

Code

The following example assumes that you have imported the component and set up the theme.

Non-Modal Dialog
<button type="button" class="toggle-button" data-dialog-toggle="non-modal-dialog">Open Non-Modal Dialog</button>


<sv-dialog id="non-modal-dialog" aria-label="Example Non-Modal Dialog" backdrop-dismiss close-button non-modal>
  <h3 class="dialog-title">Example Non-Modal Dialog</h3>
  <br />
  <p>
    This is a non-modal dialog. It does not block interaction with the rest of the page and behaves like a normal element. You can
    close it using the close button or by pressing the Escape key. Clicking outside the dialog will also dismiss it.
  </p>
</sv-dialog>


16 collapsed lines
<style>
  .toggle-button {
    display: block;
    padding: 0.8em 1.5em;
    margin: 0.5em auto;
    font-weight: bold;
    color: var(--sv-accent-content);
    cursor: pointer;
    background-color: var(--sv-accent);
    border: none;
    border-radius: var(--sv-bdr-rad-md);
  }


  .dialog-title {
    text-align: center;
  }


  /* Make the backdrop transparent for non-modal dialogs,
   allowing interaction with the page behind the dialog */
  sv-dialog {
    --sv-overlay: transparent;
  }
</style>