Project

General

Profile

Actions
Copy link

Task #63729

closed

Epic #62041: twbs Bootstrap backend, refactor EXT:t3skin and HTML5 output

Epic #62334: Modals in Backend

API for twbs modals

Added by Andreas Kienast over 9 years ago. Updated over 6 years ago.

Status:
Closed
Priority:
Must have
Assignee:
Andreas Kienast
Category:
Backend User Interface
Target version:
7.0
Start date:
2014-12-10
Due date:
% Done:

100%

Estimated time:
TYPO3 Version:
7
PHP Version:
Tags:
Complexity:
Sprint Focus:

Description

Bootstrap brings modal to us. That's nice, but currently hard to implement in the TYPO3 backend.
We need an API to create modals easiliy, similar to our Flashmessages.

Example:

TYPO3.Modal({
    title: 'Fnord',
    closable: false,
    severity: TYPO3.Severity.ok
    content: '<p>I\'m a content, I contain content.</p>',
    actions = [
        {
            text: 'Login',
            trigger: TYPO3.Loginrefresh.triggerSubmit()
        }, {
            text: 'No, log out.',
            trigger: TYPO3.Loginrefresh.logout()
        }
    ]
});

This call would return the generated modal. You may need it to do things with the modal, the API does not provide (yet).

.show() displays the modal directly.

API options (* marks required):
  • title* (string): The header displayed in the top bar of the modal
  • content* (string): The content (duh!) in the modal body
  • closable (bool): Marks the modal as closable. Default: true
  • severity (int): Marks the severity of the modal and draws a left border. Default: TYPO3.Severity.info (-1)
  • actions (array): The action buttons rendered into the modal footer. If empty or undefined, the footer is not rendered

A minimal API call would look like this:

TYPO3.Modal({
    title: 'Fnord',
    content: '<p>I\'m a content, I contain content.</p>',
}).show();

Some thoughts:
  • Generated modals are kept in the DOM, so they don't need to be created again if they are needed.
  • To avoid bloating the DOM, we just keep the ten(?) latest modals
  • Make sure modals are attached to window.top, not the frame that calls it (Kudos to Kay Strobach)
Actions
Copy link

Also available in: Atom PDF