TYPO3CMS-Reference-CoreApi icon indicating copy to clipboard operation
TYPO3CMS-Reference-CoreApi copied to clipboard

Example for modals how to provide HTML content

Open georgringer opened this issue 3 months ago • 0 comments

Modals are explained nicely at https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us//ApiOverview/Backend/JavaScript/Modules/Modals.html but one essential example is missing: How to create modals with HTML. Additionally an info should be rendered that each content is escaped otherwise (which is a good thing)

example can be

import Modal from '@typo3/backend/modal.js';
import {html} from 'lit';
import {lll as lll} from "@typo3/core/lit-helper.js";

button.addEventListener('click', function (ev) {
    event.preventDefault();

    Modal.advanced({
        content: html`<h1>A header</h1><p>a text</p>`,
        size: Modal.sizes.large
    });
});

by using lll, also translations can be rendered, e.g. using

content: html`<h1>xxxx${lll('fo')}</h1>xxx`,

and providing labels

        $pageRenderer = GeneralUtility::makeInstance(PageRenderer::class);
        $pageRenderer->loadJavaScriptModule('@vender/key/Module.js');
        $pageRenderer->addInlineLanguageLabel('fo', 'bar');

georgringer avatar Aug 26 '25 12:08 georgringer