DialogManager

Overview

DialogManager is the dialog and modal management system in Now.js Framework. It supports alerts, confirms, prompts, and custom dialogs.

When to use:

• Need alert/confirm/prompt
• Need modal dialogs
• Need form dialogs
• Need async dialog results

Why use it:

• ✅ Promise-based API
• ✅ Alert, Confirm, Prompt built-in
• ✅ Custom template support
• ✅ Keyboard accessible
• ✅ Focus trapping
• ✅ Backdrop management

Configuration

DialogManager.init({
  // Animation duration
  animationDuration: 200,

  // Close on backdrop click
  closeOnBackdrop: true,

  // Close on Escape key
  closeOnEscape: true,

  // Show backdrop
  showBackdrop: true,

  // Focus first input
  autoFocus: true,

  // Default button labels
  labels: {
    ok: 'OK',
    cancel: 'Cancel',
    yes: 'Yes',
    no: 'No'
  }
});

API Reference

DialogManager.alert(message, title?, options?)

Show alert dialog

Returns: Promise<void>

await DialogManager.alert('Saved successfully!', {
  title: 'Success'
});

DialogManager.confirm(message, title?, options?)

Show confirm dialog

Returns: Promise<boolean>

const confirmed = await DialogManager.confirm('Delete this item?', {
  title: 'Confirm Delete',
  confirmLabel: 'Delete',
  cancelLabel: 'Cancel'
});

DialogManager.prompt(message, defaultValue?, title?, options?)

Show prompt dialog

Returns: Promise<string|null>

const email = await DialogManager.prompt('Enter your email:', '', {
  title: 'Email Required',
  inputType: 'email',
  placeholder: 'user@example.com'
});

DialogManager.close(dialog)

Close current dialog

DialogManager.close(selectedValue);

DialogManager.closeAll()

Close all open dialogs

Events

DialogManager events are DOM CustomEvents dispatched on the dialog element, so
listen with element.addEventListener() and read the values from event.detail.

dialog.addEventListener('dialog:shown', (e) => {
  console.log('Dialog shown', e.detail.dialog);
});

CSS Styling

/* Dialog container */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Dialog box */
.dialog {
  background: white;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dialog-header {
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
}

.dialog-content {
  padding: 24px;
  overflow-y: auto;
}

.dialog-footer {
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Buttons */
.dialog-btn {
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}

.dialog-btn-primary {
  background: #3b82f6;
  color: white;
  border: none;
}

Common Pitfalls

⚠️ 1. Await the Promise

// ❌ Not awaiting
DialogManager.confirm('Delete?');
deleteItem();  // Runs immediately!

// ✅ Await
const confirmed = await DialogManager.confirm('Delete?');
if (confirmed) {
  deleteItem();
}

⚠️ 2. Handle null/undefined

// prompt may return null
const value = await DialogManager.prompt('Enter:');

// ❌ Not checking
processValue(value);

// ✅ Check null
if (value !== null) {
  processValue(value);
}

Related Documentation

• BackdropManager - Backdrops
• NotificationManager - Notifications