Skip to content

Dialogs

Stylised native HTML <dialog> modals with light-dismiss and transition animation styles.

Examples (anchor)

The dialog styles can be customized before compiling using Sass or in real-time with CSS variables. The button styles are not included but provided with the forms and buttons and/or the buttons component if required.

Default (anchor)

To open and close the dialogs a script (see below) adapted from Mark Otto's Fun with the dialog element is used but if required a <form method="dialog"> button can be used for closing dialogs containing form content.

Basic

Uses the dialog script for the open and close buttons plus also closes using keyboard Esc or Enter buttons.

Form method

Uses the script to open the dialog and form method for closing it plus also closes using keyboard Esc or Enter buttons.
Example HTML 
<button data-dialog="#dialog">Basic</button>
<dialog id="dialog" style="--dialog-width:30rem;">
  <h3>Basic</h3>
  <p>Uses the dialog script for the open and close buttons plus also closes using keyboard <kbd>Esc</kbd> or <kbd>Enter</kbd> buttons.</p>
  <button class="close-dialog">Close by script</button>
</dialog>

<button data-dialog="#dialog-form">Form method</button>
<dialog id="dialog-form" style="--dialog-width:30rem;">
  <h3>Form method</h3>
  <p>Uses the script to open the dialog and form method for closing it plus also closes using keyboard <kbd>Esc</kbd> or <kbd>Enter</kbd> buttons.</p>
  <form method="dialog">
    <button>Close by form method</button>
  </form>
</dialog>

Light-dismiss (anchor)

The script's close dialog functionality can also be applied to the backdrop to enable clicking outside the dialog to close it mimicking the light-dismiss functionality of the popover API but retaining the default structure of dialog styles.

Light-dismiss

Uses the dialog script for the open and close buttons and light-dismiss behaviour, or also closes using the keyboard Esc or Enter buttons.

Form method + light-dismiss

Uses the script to open the dialog and light-dismiss behaviour and the form method for the closing button. Also closes using the keyboard Esc or Enter buttons.
Example HTML 
<button data-dialog="#dialog-light-dismiss">Light-dismiss</button>
<dialog id="dialog-light-dismiss" style="--dialog-width:30rem;">
  <h3>Light-dismiss</h3>
  <p>Uses the dialog script for the open and close buttons and light-dismiss behaviour, or also closes using the keyboard <kbd>Esc</kbd> or <kbd>Enter</kbd> buttons.</p>
  <button class="close-dialog">Close by script</button>
  <div class="close-dialog"></div>
</dialog>

<button data-dialog="#dialog-form-light-dismiss">Form method + light-dismiss</button>
<dialog id="dialog-form-light-dismiss" style="--dialog-width:30rem;">
  <h3>Form method + light-dismiss</h3>
  <p>Uses the script to open the dialog and light-dismiss behaviour and the form method for the closing button. Also closes using the keyboard <kbd>Esc</kbd> or <kbd>Enter</kbd> buttons.</p>
  <form method="dialog">
    <button>Close by form method</button>
  </form>
  <div class="close-dialog"></div>
</dialog>

Close buttons (anchor)

Icon styles are also provided for the close buttons but please note these only include the styles for the icons, the default button property values (e.g. colors, active states) will be inherited from any reset/normalize or custom styles included.

Icon before

The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.

Icon after

The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.
Example HTML 
<button data-dialog="#dialog-close-button-1">Icon before</button>
<dialog id="dialog-close-button-1" style="--dialog-width:30rem;">
  <h3>Icon before</h3>
  <p>The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.</p>
  <button class="close-dialog close-dialog-ico-b">Close</button>
  <div class="close-dialog"></div>
</dialog>

<button data-dialog="#dialog-close-button-2">Icon after</button>
<dialog id="dialog-close-button-2" style="--dialog-width:30rem;">
  <h3>Icon after</h3>
  <p>The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.</p>
  <button class="close-dialog close-dialog-ico-a">Close</button>
  <div class="close-dialog"></div>
</dialog>

An icon only style button designed to stay fixed to the top right corner of dialogs is also provided. The text is visually hidden but available to assistive browsing so the button meets accessibility requirements.

Icon only

The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.

The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.
Example HTML 
<button data-dialog="#dialog-close-button-3">Icon only</button>
<dialog id="dialog-close-button-3" style="--dialog-width:30rem;">
  <h3>Icon only</h3>
  <p>The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.</p>
  <button class="close-dialog close-dialog-ico"><span>Close</span></button>
  <div class="close-dialog"></div>
</dialog>

<button data-dialog="#dialog-close-button-4">Icon only + text only</button>
<dialog id="dialog-close-button-4" style="--dialog-width:30rem;">
  <p>The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.</p>
  <button class="close-dialog close-dialog-ico"><span>Close</span></button>
  <div class="close-dialog"></div>
</dialog>

Dialog headers (anchor)

Header and body containers are provided to create dialogs with card-like title headings.

Header

The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.

Header + close icon

The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.
Example HTML 
<button data-dialog="#dialog-header-1">Header</button>
<dialog id="dialog-header-1" style="--dialog-width:30rem;">
  <div class="dialog-header">
  <h3>Header</h3>
  </div>
  <div class="dialog-body">
  <p>The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.</p>
  <button class="close-dialog">Close</button>
  </div>
  <div class="close-dialog"></div>
</dialog>

<button data-dialog="#dialog-header-close-button-2">Header + close icon</button>
<dialog id="dialog-header-close-button-2" style="--dialog-width:30rem;">
  <div class="dialog-header">
  <h3>Header + close icon</h3>
  <button class="close-dialog close-dialog-ico btn-ico"><span class="vis-hidden">Close</span></button>
  </div>
  <div class="dialog-body">
  <p>The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.</p>
  <button class="close-dialog">Close</button>
  </div>
  <div class="close-dialog"></div>
</dialog>

Offcanvas (anchor)

Inline offcanvas dialogs are also provided:

Offcanvas start

The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.

Offcanvas end

The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.
Example HTML 
<button data-dialog="#dialog-offcanvas-start">Offcanvas start</button>
<dialog id="dialog-offcanvas-start" class="dialog-offcanvas-start">
  <h2>Offcanvas start</h2>
  <p>The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.</p>
  <button class="close-dialog">Close</button>
  <div class="close-dialog"></div>
</dialog>

<button data-dialog="#dialog-offcanvas-end">Offcanvas end</button>
<dialog id="dialog-offcanvas-end" class="dialog-offcanvas-end">
  <h2>Offcanvas end</h2>
  <p>The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.</p>
  <button class="close-dialog">Close</button>
  <div class="close-dialog"></div>
</dialog>

These can also use the close button icons and/or dialog header styles:

Close icon

The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.

Header

The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.
Example HTML 
<button data-dialog="#dialog-offcanvas-icons">Offcanvas + close icon</button>
<dialog id="dialog-offcanvas-icons" class="dialog-offcanvas-start">
  <h2>Close icon</h2>
  <p>The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.</p>
  <button class="close-dialog close-dialog-ico"><span>Close</span></button>
  <div class="close-dialog"></div>
</dialog>

<button data-dialog="#dialog-offcanvas-header">Offcanvas header</button>
<dialog id="dialog-offcanvas-header" class="dialog-offcanvas-end">
  <div class="dialog-header">
  <h3>Header</h3>
  <button class="close-dialog close-dialog-ico btn-ico"><span class="vis-hidden">Close</span></button>
  </div>
  <div class="dialog-body">
  <p>The quick brown fox jumps over the lazy dog followed by five boxing wizards jumping quickly.</p>
  <button class="close-dialog close-dialog-ico-b">Close</button>
  </div>
  <div class="close-dialog"></div>
</dialog>

Image dialogs (anchor)

Image (or figure) only dialog styles are provided and include an image styled button for gallery style dialogs:

Snowy forest clearing with sunlight filtering through tall trees
Snowy forest clearing with sunlight filtering through tall trees
Example HTML 
<button class="dialog-btn-img" data-dialog="#dialog-img-1"><img src="/img/winter-forest-300.webp" alt="Snowy forest thumbnail" width="200"><span>View image</span></button>
<dialog id="dialog-img-1" class="dialog-img"> 
  <img src="/img/winter-forest-1024.webp" alt="Snowy forest clearing with sunlight filtering through tall trees" width="1024">
  <button class="close-dialog close-dialog-ico btn-ico"><span class="vis-hidden">Close</span></button>
  <div class="close-dialog"></div>
</dialog>

<button class="dialog-btn-img" data-dialog="#dialog-img-2"><img src="/img/winter-forest-300.webp" width="200"><span>View image</span></button>
<dialog id="dialog-img-2" class="dialog-figure">
  <button class="close-dialog close-dialog-ico btn-ico"><span class="vis-hidden">Close</span></button>
  <figure>
    <img src="/img/winter-forest-1024.webp" alt="" width="1024">
  <figcaption>Snowy forest clearing with sunlight filtering through tall trees</figcaption>
  </figure>
  <div class="close-dialog"></div>
</dialog>

The dialog headers can also be used with the image and/or figure image styles:

Header with image.

Snowy forest clearing with sunlight filtering through tall trees

Header with figure

Snowy forest clearing with sunlight filtering through tall trees.
Example HTML 
<button class="dialog-btn-img" data-dialog="#dialog-img-3"><img src="/img/winter-forest-300.webp" alt="Snowy forest thumbnail" width="200"><span>View image</span></button>
<dialog id="dialog-img-3" class="dialog-img"> 
  <div class="dialog-header">
  <h3>Header with image.</h3>
  <button class="close-dialog close-dialog-ico btn-ico"><span class="vis-hidden">Close</span></button>
  </div>
  <img src="/img/winter-forest-1024.webp" alt="Snowy forest clearing with sunlight filtering through tall trees" width="1024">
  <div class="close-dialog"></div>
</dialog>

<button class="dialog-btn-img" data-dialog="#dialog-img-4"><img src="/img/winter-forest-300.webp" width="200"><span>View image</span></button>
<dialog id="dialog-img-4" class="dialog-figure">
  <div class="dialog-header">
  <h3>Header with figure</h3>
  <button class="close-dialog close-dialog-ico btn-ico"><span class="vis-hidden">Close</span></button>
  </div>
  <figure>
  <img src="/img/winter-forest-1024.webp" alt="" width="1024">
  <figcaption>Snowy forest clearing with sunlight filtering through tall trees.</figcaption>
  </figure>
  <div class="close-dialog"></div>
</dialog>

Transition (anchor)

The default .25s dialog opening transition timing can be customized inline as shown below:

Heading basic

The quick brown fox jumps over the lazy dog.

Heading basic

The quick brown fox jumps over the lazy dog.

Heading basic

The quick brown fox jumps over the lazy dog.
Examples HTML 
<button data-dialog="#default-transition">Default (.25s)</button>
<dialog id="default-transition">
  <h2>Heading basic</h2>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <button class="close-dialog">Close</button>
  <div class="close-dialog"></div>
</dialog>

<button data-dialog="#custom-transition">Custom (1.5s)</button>
<dialog id="custom-transition" style="--dialog-transition: 1.5s;">
  <h2>Heading basic</h2>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <button class="close-dialog">Close</button>
  <div class="close-dialog"></div>
</dialog>

<button data-dialog="#no-transition">No transition (0s)</button>
<dialog id="no-transition" style="--dialog-transition: 0s;">
  <h2>Heading basic</h2>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <button class="close-dialog">Close</button>
  <div class="close-dialog"></div>
</dialog>

The style is compiled within the media query (prefers-reduced-motion: no-preference) to respect user preferences but if preferred the dialogs can also be compiled without the transition styles (see below).

Fixed light and dark (anchor)

Light dialog

The quick brown fox jumps over the lazy dog.

Dark dialog

The quick brown fox jumps over the lazy dog.
Example HTML 
<button data-dialog="#dialog-light" class="btn-light">Light dialog</button>
<dialog id="dialog-light" class="dialog-light">
  <h2>Light dialog</h2>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <button class="close-dialog btn-light">Close</button>
  <div class="close-dialog"></div>
</dialog>

<button data-dialog="#dialog-dark" class="btn-dark">Dark dialog</button>
<dialog id="dialog-dark" class="dialog-dark">
  <h2>Dark dialog</h2>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <button class="close-dialog btn-dark">Close</button>
  <div class="close-dialog"></div>
</dialog>

Using the module (anchor)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below.

Default with transition styles:

custom.scss 
@use "stylemods/scss" as *;
@include dialogs-css;

With no transition:

custom.scss 
@use "stylemods/scss" as *;
@include dialogs-no-transition-css;

Or individually:

custom.scss 
@use "stylemods/scss" as *;
@include dialog-styles-css;
@include dialog-transition-css;

See the using modules page for more information.

Using the framework (anchor)

Using the recommended custom setup enable the styles in an overrides document:

overrides.scss 
@use "stylemods/scss/configuration" as *;
$enable-dialogs:              true;
$enable-dialogs-transition:   true;

Include the overrides and the framework styles with your custom document for compiling the framework:

custom.scss 
@use "overrides";
@use "stylemods/scss/stylemods";

See using the framework for more information.

Source code (anchor)

The Dialogs source file is included with the components module files, you can view the source code from the latest release (v1.5.0) via the Github link below.

Source documents
stylemods/scss/components/.scss
stylemods/js/dialog.js
View on Github
https://github.com/pmbrown/StyleMods/blob/main/scss/components/.scss
https://github.com/pmbrown/StyleMods/blob/main/js/dialog.js

Shared documentation about how to customize the default property values for the styles using the Sass and CSS variables is provided on the customizing page.