<dialog open>
<p>A simple dialog box.</p>
</dialog>Dialog
The native HTML <dialog> element is fully styled by wexa.css:
border, padding, border-radius, box-shadow and a fade animation are applied automatically.
No additional stylesheet is required for a basic dialog.
Basic dialog
A <dialog open> element renders inline. No JavaScript required.
When opened as a modal via showModal(), the ::backdrop
pseudo-element applies a grayscale blur behind it.
Variables
| Variable | Role | Default |
|---|---|---|
--dialog-border-width |
Border width (follows --border-width) |
1px / 2px (contrast) |
--dialog-border-radius |
Corner radius | 0.4rem |
--dialog-box-shadow |
Drop shadow | -0.2rem 0.2rem 0.6rem 0.2rem rgba(128, 128, 128, 0.5) |
--dialog-icon-color |
Icon and button text color on colored header zone | rgb(255, 255, 255) / rgb(14, 18, 28) (dark) |
Message dialogs
Load dialog.css to use styled message dialogs. No JavaScript required.
Add role="alertdialog" and a type class to a <dialog>.
The icon header zone is generated via ::before — no extra markup required.
Six types are available: info, warning, error,
success, tips, question.
Light color scheme
<dialog role="alertdialog" class="info" aria-label="Info dialog">
<p>Message text.</p>
</dialog>
<!-- class: info | warning | error | success | tips | question -->Variables
| Variable | Role | Default (light) |
|---|---|---|
--info-color |
Border and icon zone background | rgb(60, 100, 160) |
--info-bg-color |
Content area background | rgba(230, 240, 255, 0.75) |
--warning-color |
Border and icon zone background | rgb(150, 90, 0) |
--warning-bg-color |
Content area background | rgba(255, 240, 210, 0.75) |
--error-color |
Border and icon zone background | rgb(170, 30, 30) |
--error-bg-color |
Content area background | rgba(255, 230, 230, 0.75) |
--success-color |
Border and icon zone background | rgb(40, 120, 40) |
--success-bg-color |
Content area background | rgba(225, 245, 225, 0.75) |
--tips-color |
Border and icon zone background | rgb(160, 130, 40) |
--tips-bg-color |
Content area background | rgba(250, 245, 225, 0.75) |
--question-color |
Border and icon zone background | rgb(120, 60, 180) |
--question-bg-color |
Content area background | rgba(240, 230, 250) |
Hidden alerts and modal mode
Add .hidden-alert to hide a message dialog until it is opened programmatically.
Requires JavaScript.
Use Wexa.dialog.open(id) to open it inline,
or Wexa.dialog.open(id, true) to open it as a modal with a blurred backdrop.
<dialog id="info-dlg" role="alertdialog" class="info hidden-alert" aria-label="Info dialog">
<p>Message text.</p>
</dialog>
<button onclick="Wexa.dialog.open('info-dlg')">Open info</button>
<button onclick="Wexa.dialog.open('info-dlg', true)">Open info (modal)</button>Video popup
A <dialog class="popup-video"> containing a <video>
element opens as a fullscreen modal. Requires JavaScript.
Use Wexa.dialog.playVideo(id) to open it and start playback.
The id argument is the suffix after popup- and
popup-video- in the element IDs.
With image preview
Wrap the preview image in a <figure class="img-video-visualization">.
A play button centered over the image opens the video dialog on click.
<dialog id="popup-demo" class="popup-video">
<video id="popup-video-demo" controls preload="none">
<source src="video/demo.webm" type="video/webm"/>
</video>
</dialog>
<figure class="img-video-visualization" style="width: 35vw; height: auto;">
<img src="images/preview.png" alt="Video preview"/>
<button name="play-btn" aria-label="Play video"
onclick="Wexa.dialog.playVideo('demo')">►</button>
</figure>Button only
A plain button with onclick="Wexa.dialog.playVideo(id)" is sufficient
when no image preview is needed.
<button aria-label="Play video"
onclick="Wexa.dialog.playVideo('demo')">►</button>Variables
| Variable | Role | Default |
|---|---|---|
--dialog-img-preview-bg-color |
Background of the figure.img-video-visualization element |
rgb(128, 128, 128) |