About ARS Dialog
Modal dialog component for user interactions. Supports custom content, styling with backdrop management, and both confirmation and notification modes.
Dialog Types
Input Dialog
Dialog with form input and confirmation buttons
Confirmation Dialog
Dialog with yes/no confirmation options
Notification Dialog
Simple notification with OK button
Rich Content Dialog
Dialog with complex HTML content
Advanced Features
Dialog Result: No dialog opened yet
CSS Customization & Themes
Dialog Theming Features:
CSS Variables: Theme using CSS custom properties
Custom CSS: Add your own styles
Backdrop Effects: Customize overlay and animations
Current Theme Preview:
Click a theme button above to see a styled dialog
Event Monitoring
All dialog interactions are logged below.
Event Log:
Ready to capture dialog events...
Theme Toggle
Usage Instructions
ES Module Import:
import ArsDialog from '/dist/components/ars-dialog/ars-dialog.js'
Dialog Method:
const result = await ArsDialog.dialog(content, title)
Returns the dialog DOM element or null if cancelled
Notification Method:
await ArsDialog.notify(content, title)
Shows a simple notification dialog
Content Examples:
// Simple text
'Hello, World!'
// HTML content
'<p>Enter your name: <input id="name"></p>'
// Complex forms
'<form>...</form>'