Skip to content
staticview

Dialog Examples

The examples below assume that you have imported the component and set up the theme.

Basic

A button with data-dialog-toggle pointing at the dialog's id opens and closes it. close-button shows the built-in close button, and aria-labelledby names the dialog.

Welcome aboard

This is a modal dialog, so the rest of the page is blocked while it is open. Close it with the button in the corner or by pressing the Escape key. 

<div class="dialog-basic">
  <button type="button" data-dialog-toggle="basic-dialog">Open dialog</button>
</div>


<sv-dialog id="basic-dialog" aria-labelledby="basic-dialog-title" close-button>
  <h2 id="basic-dialog-title">Welcome aboard</h2>
  <p>
    This is a modal dialog, so the rest of the page is blocked while it is open. Close it with the button in the corner or by
    pressing the Escape key.
  </p>
</sv-dialog>


<style>
  .dialog-basic {
    display: flex;
    justify-content: center;


    button {
      padding: 0.5em 1.2em;
      font: inherit;
      cursor: pointer;
      background-color: var(--sv-gray-6);
      border: 1px solid var(--sv-gray-5);
      border-radius: var(--sv-bdr-rad-md);
    }
  }


  #basic-dialog h2 {
    margin-block-start: 0;
  }
</style>

Non-Modal

non-modal leaves the page usable while the dialog is open, and backdrop-dismiss closes it on an outside click. A non-modal dialog still dims the page, so --sv-dialog-backdrop-bg: transparent drops the dimming.

The page stays usable

Try the counter button behind this dialog, it still works. Clicking anywhere outside the dialog dismisses it, and so does the Escape key. 

<div class="dialog-non-modal">
  <button type="button" data-dialog-toggle="non-modal-dialog">Open non-modal dialog</button>
  <button id="page-counter" type="button">Clicked 0 times</button>
</div>


<sv-dialog id="non-modal-dialog" aria-labelledby="non-modal-dialog-title" backdrop-dismiss close-button non-modal>
  <h2 id="non-modal-dialog-title">The page stays usable</h2>
  <p>
    Try the counter button behind this dialog, it still works. Clicking anywhere outside the dialog dismisses it, and so does the
    Escape key.
  </p>
</sv-dialog>


<script type="application/x-typescript" module>
  const counter = document.querySelector("#page-counter")!;


  let clicks = 0;


  counter.addEventListener("click", () => {
    clicks += 1;
    counter.textContent = `Clicked ${clicks} times`;
  });
</script>


<style>
  #non-modal-dialog {
    --sv-dialog-backdrop-bg: transparent;


    h2 {
      margin-block-start: 0;
    }
  }


  .dialog-non-modal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    justify-content: center;


    button {
      padding: 0.5em 1.2em;
      font: inherit;
      cursor: pointer;
      background-color: var(--sv-gray-6);
      border: 1px solid var(--sv-gray-5);
      border-radius: var(--sv-bdr-rad-md);
    }
  }
</style>

Ignore Escape

ignore-escape blocks the Escape key, so a dialog without a close button only closes through its own buttons. Use it when leaving the dialog must be a deliberate choice.

Blocking Escape is not guaranteed in every browser. In browsers without closedby support, such as Safari, repeated Escape presses may still dismiss the dialog.

Discard this draft?

Escape does nothing here and there is no close button. The dialog only closes through an explicit choice.

 
<div class="dialog-ignore-escape">
  <button type="button" data-dialog-open="escape-dialog">Discard draft</button>
</div>


<sv-dialog id="escape-dialog" aria-labelledby="escape-dialog-title" ignore-escape>
  <h2 id="escape-dialog-title">Discard this draft?</h2>
  <p>Escape does nothing here and there is no close button. The dialog only closes through an explicit choice.</p>
  <div class="dialog-footer">
    <button type="button" data-dialog-close="escape-dialog">Keep editing</button>
    <button type="button" class="danger" data-dialog-close="escape-dialog">Discard</button>
  </div>
</sv-dialog>


<style>
  .dialog-ignore-escape {
    display: flex;
    justify-content: center;


    button {
      padding: 0.5em 1.2em;
      font: inherit;
      cursor: pointer;
      background-color: var(--sv-gray-6);
      border: 1px solid var(--sv-gray-5);
      border-radius: var(--sv-bdr-rad-md);
    }
  }


  #escape-dialog {
    h2 {
      margin-block-start: 0;
    }


    .dialog-footer {
      display: flex;
      gap: 0.75em;
      justify-content: flex-end;


      button {
        padding: 0.5em 1.2em;
        font: inherit;
        cursor: pointer;
        background-color: var(--sv-gray-5);
        border: none;
        border-radius: var(--sv-bdr-rad-md);
      }


      .danger {
        color: #fff;
        background-color: crimson;
      }
    }
  }
</style>

Close Button

An element with slot="close-icon" replaces the built-in cross inside the close button, and your stylesheet targets it directly since it stays in your document. Leaving the close-button attribute off removes the button entirely, and the Escape key still closes the dialog.

A different close button

The icon in the corner comes from the close-icon slot instead of the built-in cross.

No close button

Without the close-button attribute there is no button in the corner. Press the Escape key to leave.

 
<div class="dialog-close-button">
  <button type="button" data-dialog-toggle="custom-icon-dialog">Custom icon</button>
  <button type="button" data-dialog-toggle="no-close-dialog">No close button</button>
</div>


<sv-dialog id="custom-icon-dialog" aria-labelledby="custom-icon-dialog-title" close-button>
  <!-- Circled cross -->
  <svg slot="close-icon" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
    <path
      d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z"
    />
  </svg>


  <h2 id="custom-icon-dialog-title">A different close button</h2>
  <p>The icon in the corner comes from the close-icon slot instead of the built-in cross.</p>
</sv-dialog>


<sv-dialog id="no-close-dialog" aria-labelledby="no-close-dialog-title" backdrop-dismiss>
  <h2 id="no-close-dialog-title">No close button</h2>
  <p>Without the close-button attribute there is no button in the corner. Press the Escape key to leave.</p>
</sv-dialog>


<style>
  .dialog-close-button {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    justify-content: center;


    button {
      padding: 0.5em 1.2em;
      font: inherit;
      cursor: pointer;
      background-color: var(--sv-gray-6);
      border: 1px solid var(--sv-gray-5);
      border-radius: var(--sv-bdr-rad-md);
    }
  }


  #custom-icon-dialog {
    h2 {
      margin-block-start: 0;
    }


    svg[slot="close-icon"] {
      display: block;
      inline-size: auto;
      block-size: 1.4rem;
      fill: var(--sv-accent);
    }
  }


  #no-close-dialog h2 {
    margin-block-start: 0;
  }
</style>

Scrolling

Content taller than the dialog scrolls inside it, and the close button stays pinned to the corner. The scrollbar picks up --sv-dialog-scrollbar-clr, which defaults to --sv-accent.

Terms of Service

1. Acceptance of Terms

The services provided by staticview Components are subject to the following Terms of Use. We reserve the right to update these terms at any time without notice to you. The most current version can be reviewed by clicking on the "Terms of Use" hypertext link located at the bottom of our Web pages.

2. Privacy and Protection of Personal Information

See the Privacy Policy disclosures relating to the collection and use of your information. We prioritize data encryption and ensure that your personal identifiers are never shared with third-party advertisers without explicit consent.

3. User Conduct

As a condition of your use of the Services, you will not use the Services for any purpose that is unlawful or prohibited by these terms, conditions, and notices. You may not use the Services in any manner that could damage, disable, overburden, or impair any server, or the network(s) connected to any server.

4. Limitation of Liability

In no event shall staticview be liable for any special, indirect, or consequential damages or any damages whatsoever resulting from loss of use, data, or profits, whether in an action of contract, negligence, or other tortious action, arising out of or in connection with the use or performance of software or documents.

5. Termination of Use

We may terminate your access to all or any part of the Service at any time, with or without cause, with or without notice, effective immediately, which may result in the forfeiture and destruction of all information associated with your membership. 

<div class="dialog-scrolling">
  <button type="button" data-dialog-toggle="terms-dialog">Read Terms of Service</button>
</div>


<sv-dialog id="terms-dialog" aria-labelledby="terms-dialog-title" close-button>
  <h2 id="terms-dialog-title">Terms of Service</h2>


  <section>
    <h3>1. Acceptance of Terms</h3>
    <p>
      The services provided by staticview Components are subject to the following Terms of Use. We reserve the right to update
      these terms at any time without notice to you. The most current version can be reviewed by clicking on the "Terms of Use"
      hypertext link located at the bottom of our Web pages.
    </p>
  </section>


  <section>
    <h3>2. Privacy and Protection of Personal Information</h3>
    <p>
      See the Privacy Policy disclosures relating to the collection and use of your information. We prioritize data encryption and
      ensure that your personal identifiers are never shared with third-party advertisers without explicit consent.
    </p>
  </section>


  <section>
    <h3>3. User Conduct</h3>
    <p>
      As a condition of your use of the Services, you will not use the Services for any purpose that is unlawful or prohibited by
      these terms, conditions, and notices. You may not use the Services in any manner that could damage, disable, overburden, or
      impair any server, or the network(s) connected to any server.
    </p>
  </section>


  <section>
    <h3>4. Limitation of Liability</h3>
    <p>
      In no event shall staticview be liable for any special, indirect, or consequential damages or any damages whatsoever
      resulting from loss of use, data, or profits, whether in an action of contract, negligence, or other tortious action,
      arising out of or in connection with the use or performance of software or documents.
    </p>
  </section>


  <section>
    <h3>5. Termination of Use</h3>
    <p>
      We may terminate your access to all or any part of the Service at any time, with or without cause, with or without notice,
      effective immediately, which may result in the forfeiture and destruction of all information associated with your
      membership.
    </p>
  </section>


  <div class="dialog-footer">
    <button type="button" data-dialog-close="terms-dialog">Decline</button>
    <button type="button" class="accept" data-dialog-close="terms-dialog">I Accept</button>
  </div>
</sv-dialog>


<style>
  .dialog-scrolling {
    display: flex;
    justify-content: center;


    button {
      padding: 0.5em 1.2em;
      font: inherit;
      cursor: pointer;
      background-color: var(--sv-gray-6);
      border: 1px solid var(--sv-gray-5);
      border-radius: var(--sv-bdr-rad-md);
    }
  }


  #terms-dialog {
    h2 {
      padding-block-end: 0.5em;
      margin-block-start: 0;
      border-block-end: 1px solid var(--sv-gray-5);
    }


    section {
      line-height: 1.6;
    }


    .dialog-footer {
      display: flex;
      gap: 0.75em;
      justify-content: flex-end;
      padding-block-start: 1em;
      margin-block-start: 1.5em;
      border-block-start: 1px solid var(--sv-gray-5);


      button {
        padding: 0.5em 1.2em;
        font: inherit;
        cursor: pointer;
        background-color: var(--sv-gray-5);
        border: none;
        border-radius: var(--sv-bdr-rad-md);
      }


      .accept {
        color: var(--sv-accent-content);
        background-color: var(--sv-accent);
      }
    }
  }
</style>

Styling

--sv-dialog-backdrop-bg tints the backdrop, --sv-dialog-bdr-rad rounds the corners, and --sv-dialog-dur slows the animation. The exposed parts handle the rest, like the content padding here.

Reduced Motion

Your system is set to reduce motion, so --sv-dialog-dur has no effect.

Styled dialog

A tinted backdrop, rounder corners, a slower animation, and roomier content padding.

 
<div class="dialog-styling">
  <button type="button" data-dialog-toggle="styled-dialog">Open styled dialog</button>
</div>


<sv-dialog id="styled-dialog" aria-labelledby="styled-dialog-title" close-button>
  <h2 id="styled-dialog-title">Styled dialog</h2>
  <p>A tinted backdrop, rounder corners, a slower animation, and roomier content padding.</p>
</sv-dialog>


<style>
  #styled-dialog {
    --sv-dialog-backdrop-bg: rgb(139 92 246 / 25%);
    --sv-dialog-bdr-rad: 2em;
    --sv-dialog-dur: 700ms;


    h2 {
      margin-block-start: 0;
      color: #8b5cf6;
    }


    @media (prefers-reduced-motion: reduce) {
      --sv-dialog-dur: 0s;
    }
  }


  #styled-dialog::part(content) {
    padding: 3em;
  }


  .dialog-styling {
    display: flex;
    justify-content: center;


    button {
      padding: 0.5em 1.2em;
      font: inherit;
      cursor: pointer;
      background-color: var(--sv-gray-6);
      border: 1px solid var(--sv-gray-5);
      border-radius: var(--sv-bdr-rad-md);
    }
  }
</style>