Dialog

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/dialog@2.0.0

Usage notes#


In order to avoid blurry Dialogs, wrap them in <div class="spectrum-Dialog-wrapper"> and apply .is-open to both the Wrapper and the Dialog at the same time. See this example for a working demonstration.

Variants#


Dialog - Small#
Verified

A small dialog

Disclaimer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
<button class="spectrum-Button spectrum-Button--overBackground spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)">Open Small Dialog</button>

<!-- spectrum-CSSExample-dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--small is-open spectrum-CSSExample-dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Disclaimer</h2>
  </div>
  <div class="spectrum-Dialog-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
  </div>
</div>
Show markup

Dialog - Medium#
Verified

A medium dialog

Disclaimer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
<button class="spectrum-Button spectrum-Button--overBackground spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)">Open Medium Dialog</button>

<!-- spectrum-CSSExample-dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--medium is-open spectrum-CSSExample-dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Disclaimer</h2>
  </div>
  <div class="spectrum-Dialog-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
  </div>
</div>
Show markup

Dialog - Large#
Verified

A large dialog

Disclaimer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
<button class="spectrum-Button spectrum-Button--overBackground spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)">Open Large Dialog</button>

<!-- spectrum-CSSExample-dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--large is-open spectrum-CSSExample-dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Disclaimer</h2>
  </div>
  <div class="spectrum-Dialog-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
  </div>
</div>
Show markup

Dialog - Dismissible#
Verified

A dialog that can be dismissed without taking an action. Dismissible dialogs should never have buttons.

Disclaimer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
<button class="spectrum-Button spectrum-Button--overBackground spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)">Open Dismissible Dialog</button>

<!-- spectrum-CSSExample-dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--medium spectrum-Dialog--dismissible is-open spectrum-CSSExample-dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Disclaimer</h2>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Dialog-closeButton" onclick="closeDialog(this.closest('.spectrum-Dialog'))">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossLarge" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossLarge" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Dialog-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
  </div>
</div>
Show markup

Dialog - No Divider#
Verified

Dialogs can forgo the divider if they have content that spans the entire width of the dialog.

Disclaimer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
<button class="spectrum-Button spectrum-Button--overBackground spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)">Open No Divider Dialog</button>

<!-- spectrum-CSSExample-dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--medium spectrum-Dialog--dismissible spectrum-Dialog--noDivider is-open spectrum-CSSExample-dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Disclaimer</h2>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Dialog-closeButton" onclick="closeDialog(this.closest('.spectrum-Dialog'))">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossLarge" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossLarge" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Dialog-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
  </div>
</div>
Show markup

Dialog - Hero#
Verified

Dialogs can have a hero header.

Disclaimer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
<button class="spectrum-Button spectrum-Button--overBackground spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)">Open Hero Dialog</button>

<!-- spectrum-CSSExample-dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--medium spectrum-Dialog--dismissible spectrum-Dialog--noDivider is-open spectrum-CSSExample-dialog">
  <div class="spectrum-Dialog-hero" style="background-image: url(/spectrum-css/static/images/example-card-portrait.jpg)"></div>
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Disclaimer</h2>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Dialog-closeButton" onclick="closeDialog(this.closest('.spectrum-Dialog'))">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossLarge" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossLarge" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Dialog-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
  </div>
</div>
Show markup

Dialog - Alert Confirmation#
Verified

A confirmation alert dialog has specific button styles that should be used.

Enable Smart Filters?

Smart filters are nondestructive and will preserve your original images.
<button class="spectrum-Button spectrum-Button--overBackground spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)">Open Configuration Dialog</button>

<!-- spectrum-CSSExample-dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--alert is-open spectrum-CSSExample-dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Enable Smart Filters?</h2>
  </div>
  <div class="spectrum-Dialog-content">
    Smart filters are nondestructive and will preserve your original images.
  </div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Cancel</button>
    <button class="spectrum-Button spectrum-Button--cta" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Enable</button>
  </div>
</div>
Show markup

Dialog - Alert Information#
Verified

An information alert dialog has specific button styles that should be used.

Connect to WiFi

Please connect to WiFi to sync your projects or go to Settings to change your preferences.
<button class="spectrum-Button spectrum-Button--overBackground spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)">Open Information Dialog</button>

<!-- spectrum-CSSExample-dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--alert is-open spectrum-CSSExample-dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Connect to WiFi</h2>
  </div>
  <div class="spectrum-Dialog-content">
    Please connect to WiFi to sync your projects or go to Settings to change your preferences.
  </div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Cancel</button>
    <button class="spectrum-Button spectrum-Button--primary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Continue</button>
  </div>
</div>
Show markup

Dialog - Alert Destructive#
Verified

An destructive alert dialog has specific button styles that should be used.

Delete 3 Documents

Are you sure you want to delete the 3 selected documents?
<button class="spectrum-Button spectrum-Button--overBackground spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)">Open Destructive Dialog</button>

<!-- spectrum-CSSExample-dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--alert is-open spectrum-CSSExample-dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Delete 3 Documents</h2>
  </div>
  <div class="spectrum-Dialog-content">
    Are you sure you want to delete the 3 selected documents?
  </div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Cancel</button>
    <button class="spectrum-Button spectrum-Button--warning" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Delete</button>
  </div>
</div>
Show markup

Dialog - Alert Error#
Verified

An error alert dialog has an error icon in the header.

Unable to Share

An error occurred while sharing your project. Please verify the email address and try again.
<button class="spectrum-Button spectrum-Button--overBackground spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)">Open Error Dialog</button>

<!-- spectrum-CSSExample-dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--error spectrum-Dialog--alert is-open spectrum-CSSExample-dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Unable to Share</h2>
    <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Dialog-typeIcon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-AlertMedium" />
    </svg>
  </div>
  <div class="spectrum-Dialog-content">
    An error occurred while sharing your project. Please verify the email address and try again.
  </div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--primary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">OK</button>
  </div>
</div>
Show markup

Dialog - Alert 3 buttons#
Verified

An alert dialog can have up to 3 buttons.

Rate This App

If you enjoy our app, would you mind taking a moment to rate it?
<button class="spectrum-Button spectrum-Button--overBackground spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)">Open 3 Button Dialog</button>

<!-- spectrum-CSSExample-dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--alert is-open spectrum-CSSExample-dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Rate This App</h2>
  </div>
  <div class="spectrum-Dialog-content">
    If you enjoy our app, would you mind taking a moment to rate it?
  </div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">No, Thanks</button>
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Remind Me Later</button>
    <button class="spectrum-Button spectrum-Button--primary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Rate Now</button>
  </div>
</div>
Show markup

Dialog - Scrolling#
Unverified

A dialog without .spectrum-Dialog--alert can expand to a larger size to house larger contents.

EULA

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

<button class="spectrum-Button spectrum-Button--overBackground spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)">Open Scrolling Dialog</button>

<div class="spectrum-Dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">EULA</h2>
  </div>
  <div class="spectrum-Dialog-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
  </div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Decline</button>
    <button class="spectrum-Button spectrum-Button--primary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Accept</button>
  </div>
</div>
Show markup

Dialog - Fullscreen#
Unverified

A fullscreen dialog will automatically fill almost all of the available screen space.

Default Dialog - Fullscreen

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

<button variant="primary" class="spectrum-Button spectrum-Button--overBackground spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)">Open Fullscreen Dialog</button>

<div class="spectrum-Dialog spectrum-Dialog--fullscreen">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Default Dialog - Fullscreen</h2>
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Cancel</button>
    <button class="spectrum-Button spectrum-Button--cta" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Save</button>
  </div>
  <div class="spectrum-Dialog-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
  </div>
  <div class="spectrum-Dialog-footer">
    Anything in the footer is sticky and aligned right.
  </div>
</div>
Show markup

Dialog - Fullscreen Takeover#
Unverified

A fullscreen takeover dialog will fill all of the available screen space.

Fullscreen Takeover

This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
<button class="spectrum-Button spectrum-Button--overBackground spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling, false)">Open Fullscreen Takeover Dialog</button>

<div class="spectrum-Dialog spectrum-Dialog--fullscreenTakeover">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Fullscreen Takeover</h2>
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Cancel</button>
    <button class="spectrum-Button spectrum-Button--cta" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Save</button>
  </div>
  <div class="spectrum-Dialog-content">
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
  </div>
  <div class="spectrum-Dialog-footer">
    Anything in the footer is sticky and aligned right.
  </div>
</div>
Show markup

Dialog - Wrapped#
Verified

A dialog wrapped so that its positioned in a non-blurry way

Disclaimer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
<button class="spectrum-Button spectrum-Button--overBackground spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)">Open Wrapped Dialog</button>

<div class="spectrum-Dialog-wrapper">
  <div class="spectrum-Dialog spectrum-Dialog--small spectrum-Dialog--dismissible">
    <div class="spectrum-Dialog-header">
      <h2 class="spectrum-Dialog-title">Disclaimer</h2>
      <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Dialog-closeButton" onclick="closeDialog(this.closest('.spectrum-Dialog'))">
        <svg class="spectrum-Icon spectrum-UIIcon-CrossLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CrossLarge" />
        </svg>
      </button>
    </div>
    <div class="spectrum-Dialog-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
    </div>
  </div>
</div>
Show markup