Modals JS Enhanced

Dialog windows for user notifications, confirmations, prompts, and custom content. Use the simple JavaScript API for best results.

Simple JavaScript API

Focus UI provides one-line functions for common modal patterns. No need to write HTML - just call Modal.confirm(), Modal.prompt(), or Modal.deleteConfirm() and you're done!

Confirm Dialog

Show a confirmation dialog with Promise-based handling. Perfect for "Are you sure?" moments:

JavaScript 
Modal.confirm({
  title: 'Confirm Action',
  message: 'Are you sure you want to proceed?',
  variant: 'info',  // 'info', 'success', 'warning', 'danger'
  confirmText: 'Yes, proceed',
  cancelText: 'Cancel'
}).then(() => {
  console.log('Confirmed!')
  // User clicked confirm
}).catch(() => {
  console.log('Cancelled')
  // User clicked cancel or pressed ESC
})

Delete Confirmation (with Typing)

A safety feature that requires users to type a confirmation text before allowing deletion. Perfect for destructive actions:

JavaScript 
Modal.deleteConfirm({
  title: 'Delete Project',
  message: 'This action cannot be undone.',
  entityName: 'MyProject',  // User must type this to enable delete
  confirmText: 'Delete',
  cancelText: 'Cancel'
}).then(() => {
  // Delete confirmed
  deleteProject()
}).catch(() => {
  console.log('Deletion cancelled')
})

Prompt for Input

Get user input with a modal dialog. Supports both text input and textarea:

JavaScript 
// Text input
Modal.prompt({
  title: 'Rename Item',
  message: 'Enter a new name:',
  placeholder: 'Item name',
  defaultValue: 'Current Name',
  type: 'text',  // or 'textarea'
  required: false,
  confirmText: 'Rename',
  cancelText: 'Cancel'
}).then(newName => {
  console.log('New name:', newName)
}).catch(() => {
  console.log('Cancelled')
})

// Textarea input
Modal.prompt({
  title: 'Add Note',
  message: 'Enter your note:',
  type: 'textarea',
  placeholder: 'Type your note here...'
}).then(note => {
  saveNote(note)
})

Custom Modal (HTML)

For custom layouts, create your modal HTML and use Modal.open() to show it:

HTML 
<!-- Modal HTML (hidden by default) -->
<div class="focus-modal-overlay" id="customModal" style="display:none;">
  <div class="focus-modal">
    <div class="focus-modal-header">
      <h2>Custom Modal</h2>
      <button class="focus-modal-close" onclick="FocusUI.Modal.close('#customModal')">
        ×
      </button>
    </div>
    <div class="focus-modal-body">
      <p>Your custom content here.</p>
    </div>
    <div class="focus-modal-footer">
      <button class="focus-btn focus-btn-secondary"
              onclick="FocusUI.Modal.close('#customModal')">
        Close
      </button>
      <button class="focus-btn focus-btn-primary">Save</button>
    </div>
  </div>
</div>
JavaScript 
// Open modal
Modal.open('#customModal', {
  focusTrap: true,       // Trap focus within modal (default: true)
  closeOnEsc: true,      // Close on ESC key (default: true)
  closeOnOverlay: false  // Close on overlay click (default: false)
})

// Close modal
Modal.close('#customModal')
Data Attributes

You can also use data attributes for automatic modal initialization: <button data-focus-modal="#myModal"> to open, <button data-focus-modal-close> to close.

Modal Sizes

Control modal width with size modifiers:

HTML 
<!-- Small (400px) -->
<div class="focus-modal focus-modal-sm">...</div>

<!-- Medium (600px) - default -->
<div class="focus-modal focus-modal-md">...</div>

<!-- Large (800px) -->
<div class="focus-modal focus-modal-lg">...</div>

<!-- Extra Large (1140px) -->
<div class="focus-modal focus-modal-xl">...</div>

<!-- Fullscreen -->
<div class="focus-modal focus-modal-full">...</div>

Modal Variants

Use semantic color variants for different contexts:

HTML 
<div class="focus-modal focus-modal-info">...</div>
<div class="focus-modal focus-modal-success">...</div>
<div class="focus-modal focus-modal-warning">...</div>
<div class="focus-modal focus-modal-danger">...</div>

Complete JavaScript API

Modal.confirm(config)

Show a confirmation dialog with Promise-based handling.

Modal.confirm({
  title: 'Confirm',
  message: 'Are you sure?',
  variant: 'info',      // 'info', 'success', 'warning', 'danger'
  confirmText: 'Confirm',
  cancelText: 'Cancel'
})

Returns: Promise (resolves on confirm, rejects on cancel)

Modal.deleteConfirm(config)

Confirmation dialog with required text input for safety.

Modal.deleteConfirm({
  title: 'Delete',
  message: 'This cannot be undone.',
  entityName: 'ProjectName',  // User must type this
  confirmText: 'Delete',
  cancelText: 'Cancel'
})

Returns: Promise (resolves on confirm, rejects on cancel)

Modal.prompt(config)

Get user input via text input or textarea.

Modal.prompt({
  title: 'Input',
  message: 'Enter value:',
  placeholder: '',
  defaultValue: '',
  type: 'text',        // 'text' or 'textarea'
  required: false,
  confirmText: 'OK',
  cancelText: 'Cancel'
})

Returns: Promise<string> (resolves with input value, rejects on cancel)

Modal.open(element, options)

Open a custom modal programmatically.

Modal.open('#myModal', {
  focusTrap: true,       // Trap focus (default: true)
  closeOnEsc: true,      // Close on ESC (default: true)
  closeOnOverlay: false  // Close on overlay click (default: false)
})

Modal.close(element)

Close a modal programmatically.

Modal.close('#myModal')

CSS Classes

Class Description
.focus-modal-overlay Modal backdrop container
.focus-modal Base modal (required)
.focus-modal-sm Small (400px)
.focus-modal-lg Large (800px)
.focus-modal-xl Extra large (1140px)
.focus-modal-full Fullscreen
.focus-modal-info Info variant (blue)
.focus-modal-success Success variant (green)
.focus-modal-warning Warning variant (yellow)
.focus-modal-danger Danger variant (red)