Ludo
fe8ddd6153
New data-demo attribute for demo blocks in documentation. Replaced 16 files worth of inline style="" wrappers with <div data-demo>. Only remaining style= is charts --size data injection (legitimate). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
28 lines
934 B
Markdown
28 lines
934 B
Markdown
---
|
|
title: "Dialog"
|
|
description: "Native HTML dialog element styled by ASW."
|
|
type: docs
|
|
weight: 36
|
|
date: 2026-04-11
|
|
tags: ["components", "dialog", "modal"]
|
|
ai-disclosure: "generated"
|
|
ai-model: "claude-sonnet-4-6"
|
|
ai-provider: "Anthropic"
|
|
---
|
|
|
|
ASW styles the native `<dialog>` element — no JavaScript modal libraries required. Call `dialog.showModal()` to open it. The `::backdrop` pseudo-element receives a semi-transparent overlay automatically.
|
|
|
|
## Inline Demo
|
|
|
|
<div data-demo>
|
|
<button onclick="document.getElementById('demo-dialog').showModal()">Open dialog</button>
|
|
<dialog id="demo-dialog">
|
|
<article>
|
|
<header><h3>Dialog title</h3></header>
|
|
<p>This is a native <code><dialog></code> element. ASW styles the backdrop and container automatically.</p>
|
|
<footer>
|
|
<button onclick="document.getElementById('demo-dialog').close()">Close</button>
|
|
</footer>
|
|
</article>
|
|
</dialog>
|
|
</div>
|