Dialog

HTML <dialog> タグ

Basic Dialog
Dialog Title

This is a basic dialog using the native HTML <dialog> element.

The backdrop is provided by the ::backdrop pseudo-element.
Small (.sm)
Small Dialog

This is a small dialog (.sm).
Large (.lg)
Large Dialog

This is a large dialog (.lg). It can hold more content horizontally.
Full (.full)
Full-Width Dialog

This dialog expands to nearly fill the viewport (.full).
Scrollable Body (.scrollable)
Scrollable Dialog

Line 1: Lorem ipsum dolor sit amet.

Line 2: Consectetur adipiscing elit.

Line 3: Sed do eiusmod tempor incididunt.

Line 4: Ut labore et dolore magna aliqua.

Line 5: Ut enim ad minim veniam.

Line 6: Quis nostrud exercitation ullamco.

Line 7: Laboris nisi ut aliquip ex ea commodo.

Line 8: Duis aute irure dolor in reprehenderit.

Line 9: In voluptate velit esse cillum dolore.

Line 10: Eu fugiat nulla pariatur excepteur sint.
Body Only (no header/footer)

This dialog has no header or footer — body content only.

div ベース（レガシーブラウザ対応）

.dialog-backdrop + .dialog の組み合わせで、 ネイティブ <dialog> をサポートしないブラウザでも動作します。 バックドロップには .dialog-backdrop、ダイアログ本体には .dialog を使います。 バックドロップに .open クラスを付与すると表示されます。

Basic (div-based)
Small (.sm, div-based)
Scrollable Body (div-based)
Backdrop click to close (div-based)

CSS変数カスタマイズ例

Custom styled dialog
Custom Styled Dialog

This dialog is customized via inline CSS variables.

Themes can override --dialog-* variables to match their design system.