Modals JS Required

Use modals to add dialogs to your site for lightboxes, user notifications, or completely custom content. Includes support for different sizes, variants, and specialized modal types.

JavaScript Required

While the modal HTML and CSS work without JavaScript, opening/closing modals requires JavaScript. Include focus-ui.js to enable interactive functionality.

Click Behavior

By default, modals cannot be closed by clicking outside the modal (on the overlay). This prevents accidental dismissal. Use the close button or ESC key to dismiss. Add data-focus-modal-dismiss to the overlay to enable click-outside-to-close.

Basic Modal

Click the button to launch a basic modal. Use the close button or press ESC to dismiss:

HTML 
<!-- Trigger Button -->
<button class="focus-btn focus-btn-primary" data-focus-modal="#basicModal">
  Open Modal
</button>

<!-- Modal -->
<div class="focus-modal-overlay" id="basicModal" style="display:none;">
  <div class="focus-modal">
    <div class="focus-modal-header">
      <h2 class="focus-modal-title">Basic Modal</h2>
      <button class="focus-modal-close" data-focus-modal-close>×</button>
    </div>
    <div class="focus-modal-body">
      <p>This is a basic modal. You can put any content here.</p>
      <p>Click outside the modal, press ESC, or click the close button to dismiss it.</p>
    </div>
    <div class="focus-modal-footer">
      <button class="focus-btn focus-btn-secondary" data-focus-modal-close>Close</button>
      <button class="focus-btn focus-btn-primary">Save changes</button>
    </div>
  </div>
</div>

Dismiss on Overlay Click

Add data-focus-modal-dismiss to enable closing the modal by clicking outside of it:

HTML 
<!-- Add data-focus-modal-dismiss to the overlay -->
<div class="focus-modal-overlay" id="dismissModal" data-focus-modal-dismiss style="display:none;">
  <div class="focus-modal">
    <div class="focus-modal-header">
      <h2 class="focus-modal-title">Dismissible Modal</h2>
      <button class="focus-modal-close" data-focus-modal-close>×</button>
    </div>
    <div class="focus-modal-body">
      <p>Click outside this modal (on the dark overlay) to close it.</p>
    </div>
  </div>
</div>

Modal Sizes

Modals come in different sizes: .focus-modal-sm, .focus-modal-md (default), .focus-modal-lg, .focus-modal-xl, and .focus-modal-full:

HTML 
<!-- Small Modal -->
<div class="focus-modal focus-modal-sm">...</div>

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

<!-- Large Modal -->
<div class="focus-modal focus-modal-lg">...</div>

<!-- Extra Large Modal -->
<div class="focus-modal focus-modal-xl">...</div>

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

Modal Variants

Use variant classes to style modals for different contexts:

HTML 
<!-- Info Modal -->
<div class="focus-modal focus-modal-info">...</div>

<!-- Success Modal -->
<div class="focus-modal focus-modal-success">...</div>

<!-- Warning Modal -->
<div class="focus-modal focus-modal-warning">...</div>

<!-- Danger Modal -->
<div class="focus-modal focus-modal-danger">...</div>

Confirm Modal (JavaScript API)

Use the JavaScript API to show a confirm dialog programmatically:

JavaScript 
FocusUI.Modal.confirm({
  title: 'Confirm Action',
  message: 'Are you sure you want to proceed?',
  variant: 'info',
  confirmText: 'Yes, proceed',
  cancelText: 'Cancel'
}).then(() => {
  FocusUI.Toast.show({
    type: 'success',
    message: 'Action confirmed!'
  })
}).catch(() => {
  FocusUI.Toast.show({
    type: 'info',
    message: 'Action cancelled'
  })
})

Delete Confirm Modal (Input Validation)

A specialized modal that requires typing a confirmation text (e.g., project name) to enable the confirm button:

JavaScript 
FocusUI.Modal.deleteConfirm({
  title: 'Delete Project',
  message: 'This action cannot be undone. All data will be permanently deleted.',
  entityName: 'MyProject',
  confirmText: 'Delete',
  cancelText: 'Cancel'
}).then(() => {
  FocusUI.Toast.show({
    type: 'success',
    message: 'Project deleted successfully'
  })
}).catch(() => {
  console.log('Deletion cancelled')
})

Prompt Modal (Text Input)

Show a modal with a text input or textarea:

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

// Textarea input
FocusUI.Modal.prompt({
  title: 'Add Note',
  message: 'Enter your note:',
  placeholder: 'Type your note here...',
  type: 'textarea',
  confirmText: 'Save',
  cancelText: 'Cancel'
}).then(note => {
  console.log('Note:', note)
})

JavaScript API

Modal.open(element, options)

Opens a modal programmatically:

JavaScript 
FocusUI.Modal.open('#myModal', {
  focusTrap: true,      // Enable focus trapping (default: true)
  closeOnEsc: true,     // Close on ESC key (default: true)
  closeOnOverlay: true  // Close when clicking overlay (default: true)
})

Modal.close(element)

Closes a modal programmatically:

JavaScript 
FocusUI.Modal.close('#myModal')

Data Attributes (Automatic Initialization)

Use data attributes for automatic initialization without writing JavaScript:

Attribute Element Description
data-focus-modal="#id" Button/Link Opens the modal with the specified ID
data-focus-modal-close Button Closes the parent modal

CSS Classes Reference

Class Description
.focus-modal-overlay Modal backdrop container
.focus-modal Base modal class (required)
.focus-modal-sm Small modal (400px)
.focus-modal-md Medium modal - default (600px)
.focus-modal-lg Large modal (800px)
.focus-modal-xl Extra large modal (1140px)
.focus-modal-full Fullscreen modal
.focus-modal-info Info variant (blue header)
.focus-modal-success Success variant (green header)
.focus-modal-warning Warning variant (yellow header)
.focus-modal-danger Danger variant (red header)
.focus-modal-header Modal header section
.focus-modal-body Modal body section
.focus-modal-footer Modal footer section
.focus-modal-close Close button in header