- ☀️Light
- 🌙Dark
- 💻System
💠 Examples
💻 HTML Code
🧩 How to use
Add data-js="dialog" to a button and set
data-target to the dialog ID. The script opens the dialog and
closes it when the user clicks an element with .close or presses ESC.
📏 Sizes
These classes apply only to dialogs.
Each one defines a different maximum width while remaining responsive on smaller screens.
.dialog
.dialog-sm
.dialog-md
.dialog-lg
🎨 Colors
Apply a color to your dialog using .dialog-{color}. Each variant sets the background, border, and text contrast for the entire dialog.
For more specific variations such as custom headers, borders, or additional effects, refer to the examples above.
.dialog-{color}
⚙️ Variables CSS
| Variable | Description |
|---|---|
--dialog-bg-color |
Background color of the dialog. |
--dialog-backdrop-color |
Color of the dialog backdrop overlay. |
--dialog-body-padding |
Padding inside the dialog body. |
--dialog-border-color |
Border color of the dialog. |
--dialog-border-radius |
Corner radius of the dialog. |
--dialog-border-style |
Border style of the dialog. |
--dialog-border-width |
Thickness of the dialog border. |
--dialog-footer-padding |
Padding inside the dialog footer. |
--dialog-header-padding |
Padding inside the dialog header. |
--dialog-padding |
Global padding applied to the dialog container. |
--dialog-width |
Default width of the dialog. |
--dialog-width-lg |
Width of the dialog for large-sized layouts. |
--dialog-width-md |
Width of the dialog for medium-sized layouts. |
--dialog-width-sm |
Width of the dialog for small-sized layouts. |
🔔 Events
These custom events let you run code before or after the dialog opens or closes.
| Event | Description |
|---|---|
dialog:beforeOpen |
Fires just before the dialog starts opening. |
dialog:afterOpen |
Fires right after the dialog is fully opened. |
dialog:beforeClose |
Fires just before the dialog starts closing. |
dialog:afterClose |
Fires right after the dialog is fully closed. |