Modals required

Dialog windows for notifications, confirmations, prompts, and custom content.

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 
// Returns a Promise: resolves if user confirms, rejects if cancelled/ESC pressed
Modal.confirm({
  title: 'Confirm Action',
  message: 'Are you sure you want to proceed?',
  variant: 'info',
  confirmText: 'Yes, proceed',
  cancelText: 'Cancel'
}).then(() => {
  // Executes if user clicks confirm button
  console.log('Confirmed!')
}).catch(() => {
  // Executes if user clicks cancel or presses ESC
  console.log('Cancelled')
})

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>

JavaScript API

Create dialogs programmatically. All methods return Promises that resolve on confirm and reject on cancel/ESC.

Confirm Dialog

JavaScript 
Modal.confirm({
  title: 'Confirm Action',
  message: 'Are you sure?',
  variant: 'info',
  confirmText: 'Confirm',
  cancelText: 'Cancel'
}).then(() => console.log('Confirmed'))
  .catch(() => console.log('Cancelled'))

Delete Confirmation

JavaScript 
Modal.deleteConfirm({
  title: 'Delete Project',
  message: 'This cannot be undone.',
  entityName: 'ProjectName'
}).then(() => deleteProject())

Prompt for Input

JavaScript 
Modal.prompt({
  title: 'Rename',
  message: 'Enter new name:',
  defaultValue: 'Current Name',
  type: 'text'
}).then(name => console.log('New name:', name))

Open/Close Custom Modal

JavaScript 
Modal.open('#myModal', { focusTrap: true, closeOnEsc: true })
Modal.close('#myModal')

Methods

Method Returns Description
Modal.confirm(options) Promise Show confirmation dialog
Modal.deleteConfirm(options) Promise Delete confirmation with required text input
Modal.prompt(options) Promise<string> Get user input via text or textarea
Modal.open(selector, options) void Open a custom modal
Modal.close(selector) void Close a modal

Confirm Options

Option Type Default Description
title string 'Confirm' Dialog title
message string '' Dialog message
variant string 'info' Color variant: 'info', 'success', 'warning', 'danger'
confirmText string 'Confirm' Confirm button text
cancelText string 'Cancel' Cancel button text

Prompt Options

Option Type Default Description
title string 'Input' Dialog title
message string '' Dialog message
placeholder string '' Input placeholder text
defaultValue string '' Initial input value
type string 'text' Input type: 'text' or 'textarea'
required boolean false Require non-empty input

Open Options

Option Type Default Description
focusTrap boolean true Trap focus within modal
closeOnEsc boolean true Close on ESC key
closeOnOverlay boolean false Close on overlay click

CSS Classes Reference

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)