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...\n
đ Usage Instructions
ES Module Import:
import ArsDialog from '../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>'
'Hello, World!'
// HTML content
'<p>Enter your name: <input id="name"></p>'
// Complex forms
'<form>...</form>'