Modals

Actions that require a user's attention must be visualized by modal windows.

TYPO3 provides an API as basis to create modal windows with severity representation. For better UX, if actions (buttons) are attached to the modal, one button must be a positive action. This button should get a btnClass to highlight it.

Modals should be used rarely and only for confirmations. For information that does not require a confirmation the Notification API (flash message) should be used.

For complex content, like forms or a lot of information, use normal pages.

API

The API provides only two public methods:

  1. TYPO3.Modal.confirm(title, content, severity, buttons)

  2. TYPO3.Modal.dismiss()

Button settings

text
Required

true

Type

string

The text rendered into the button.

trigger / action
Required

true

Type

function

Callback that is triggered on button click - either a simple function or DeferredAction / ImmediateAction

active
Type

bool

Marks the button as active. If true, the button gets the focus.

btnClass
Type

string

The CSS class for the button.

Data Attributes

It is also possible to use data attributes to trigger a modal, for example on an anchor element, which prevents the default behavior.

data-title

The title text for the modal.

data-bs-content

The content text for the modal.

data-severity

The severity for the modal, default is info (see TYPO3.Severity.*).

data-href

The target URL, default is the href attribute of the element.

data-button-close-text

Button text for the close/cancel button.

:html:`data-button-ok-text `

Button text for the ok button.

class="t3js-modal-trigger"

Marks the element as modal trigger.

Example:

Examples

A basic modal (without anything special) can be created this way:

TYPO3.Modal.confirm('The title of the modal', 'This the the body of the modal');

A modal as warning with button:

A modal as warning:

TYPO3.Modal.confirm('Warning', 'You may break the internet!', TYPO3.Severity.warning);

Action buttons in modals created by the TYPO3/CMS/Backend/Modal module may make use of TYPO3/CMS/Backend/ActionButton/ImmediateAction and TYPO3/CMS/Backend/ActionButton/DeferredAction.

As an alternative to the existing trigger option, the option action may be used with an instance of the previously mentioned modules.

Activating any action disables all buttons in the modal. Once the action is done, the modal disappears automatically.

Buttons of the type DeferredAction render a spinner on activation into the button.