PHPackages                             fucodo/dialog-overlay - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. fucodo/dialog-overlay

ActiveTypo3-cms-extension

fucodo/dialog-overlay
=====================

Container-CE mit HTML5-Dialog (modal) + Web Component (Cookie-gesteuert).

0.3.0(6mo ago)03GPL-2.0-or-laterPHP

Since Oct 29Pushed 6mo agoCompare

[ Source](https://github.com/fucodo/dialog_overlay)[ Packagist](https://packagist.org/packages/fucodo/dialog-overlay)[ RSS](/packages/fucodo-dialog-overlay/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (2)Versions (4)Used By (0)

TYPO3 Extension: dialog\_overlay
================================

[](#typo3-extension-dialog_overlay)

Container content element with an HTML5 `` (modal) that can be shown automatically once per visitor using a cookie. Ships a small Web Component that handles auto‑open and cookie logic. Built for the b13/container.

- Extension key: `dialog_overlay`
- Package name: `fucodo/dialog-overlay`
- TYPO3: ^12.4 or ^13.0
- Requires: `b13/container` ^2 or ^3
- License: GPL-2.0-or-later

Examples
--------

[](#examples)

### Frontend

[](#frontend)

[![Example.png](Documentation/Images/Example.png)](Documentation/Images/Example.png)

### Backend

[](#backend)

[![Backend.png](Documentation/Images/Backend.png)](Documentation/Images/Backend.png)

Features
--------

[](#features)

- New content element: “Dialog Overlay (einmalig)” (`CType = dialog_overlay`)
- HTML5 `` modal including optional close button
- Auto‑open once per user using a cookie (configurable name and lifetime)
- Integrates with b13/container: provides one area for dialog content
- Minimal default styling; easy to override
- Static TypoScript for Fluid template registration and rendering

Installation
------------

[](#installation)

1. Install the extension (part of this distribution) and ensure dependencies are available:
    - TYPO3 Core ^12.4 or ^13
    - `b13/container` ^2 or ^3
2. Include the static TypoScript template in your site template:
    - Template record → Includes → Add “Dialog Overlay (CE & FE Rendering)”.
3. PageTS is auto‑imported by the extension (see `ext_localconf.php`), so the New Content Element Wizard entry is available under the "special" group.

Usage (Editor)
--------------

[](#usage-editor)

1. In the New Content Element Wizard, choose: Special → “Dialog Overlay (einmalig)”.
2. Fill the fields:
    - Titel (header): Optional title; not rendered by default but useful for backend identification.
    - Einstellungen (Settings):
        - Cookie‑Lebensdauer (Tage): Number of days the “already shown” cookie should live (default 30; 1–3650).
        - Cookie‑Name: Optional. If empty, defaults to `overlay_shown_{uid}`.
        - Automatisch öffnen: If checked, the dialog opens automatically on page load (default on). If unchecked, the dialog won’t auto‑open and can be opened via custom JS.
        - Schließen‑Button anzeigen: If checked, renders a close button inside the dialog (default on).
        - Beschriftung Schließen‑Button: Optional label (default “Schließen”).
3. Dialog‑Inhalt: Add and arrange any content elements in the provided container area. They render inside the modal.

Rendering & Frontend
------------------------

[](#rendering--frontend)

- Fluid template: `Resources/Private/Templates/Content/DialogOverlay.html`
- TypoScript setup registers the template via `tt_content.dialog_overlay` and `templateRootPaths`.
- The markup renders a Web Component `` with attributes:
    - `data-cookie-name`: Cookie name. Defaults to `overlay_shown_{uid}` if not set.
    - `data-cookie-days`: Cookie lifetime (days). Defaults to `30`.
    - `data-auto-open`: `"1"` or `"0"` to enable/disable auto‑open.
- Inside the component there is a native `` element containing your content and an optional close button.

### JavaScript behavior

[](#javascript-behavior)

The script `Resources/Public/JavaScript/dialog-overlay.js` defines the custom element `fucodo-modal-once`:

- On connect, it determines cookie name, days, and auto‑open mode from attributes.
- If auto‑open is enabled and the cookie isn’t set, it opens the dialog (prefers `showModal()`, falls back to `open` attribute).
- When the `` is closed (e.g., via the close button), it writes a cookie with `SameSite=Lax` and `Secure` on HTTPS.
- Uses a cookie name derived from the content element UID if no explicit name is provided.

### Styling

[](#styling)

A small default stylesheet is included via ``:

- Path: `EXT:dialog_overlay/Resources/Public/Webcomponents/fucodo-dialog-overlay/dist/index.css`
- Selectors it defines by default:
    - `.dialog-overlay::backdrop { background: rgba(0,0,0,.5); }`
    - `.dialog-overlay { border: 0; border-radius: .5rem; padding: 0; }`
    - `.dialog-content { padding: 1rem; }`
    - `.dialog-close-btn { display: inline-block; margin: 1rem; margin-top: .75rem; margin-right: 1.5rem; float: right; }`

How to customize:

- Override with site CSS loaded after the extension’s CSS (preferred). Example:

```
/* increase backdrop opacity and content spacing */
.dialog-overlay::backdrop { background: rgba(0,0,0,.65); }
.dialog-content { padding: 1.5rem; }

/* constrain dialog width responsively */
.dialog-overlay { width: min(90vw, 48rem); }

/* place the close button differently */
.dialog-close-btn { float: none; margin: 0; }
```

- Replace the stylesheet entirely by overriding the Fluid template `DialogOverlay.html` in your sitepackage and removing or swapping the `` line.

### Accessibility notes

[](#accessibility-notes)

- Uses the native `` element with `aria-modal="true"`.
- Ensure a visible, accessible close control is present (the provided close button uses `method="dialog"`).
- Keep focusable elements inside the dialog and provide meaningful content. Test keyboard navigation and screen reader announcements in your target browsers.

### Privacy & Cookies

[](#privacy--cookies)

- A single cookie is set on dialog close to remember that the dialog was shown.
- Attributes:
    - Name: configurable (`cookie_name` or `overlay_shown_{uid}` fallback)
    - Lifetime: configurable (days)
    - Path: `/`, `SameSite=Lax`, `Secure` when on HTTPS
- Adjust your privacy policy as needed.

Integrator reference
--------------------

[](#integrator-reference)

### TCA fields (tt\_content)

[](#tca-fields-tt_content)

- `cookie_lifetime_days`: number (default 30, range 1–3650)
- `cookie_name`: input (placeholder `overlay_shown_{uid}`)
- `auto_open`: check (default 1)
- `show_close_button`: check (default 1)
- `close_button_label`: input (default “Schließen”; shown only if `show_close_button` is enabled)

### Container setup

[](#container-setup)

- Uses `b13/container` with a single area labeled “Dialog-Inhalt” at `colPos = 201`.
- In Fluid, children are available via `{children_201}` and are rendered as provided.

### Overriding templates and assets

[](#overriding-templates-and-assets)

- Templates: Add your own `templateRootPaths.20` in your site package to override `DialogOverlay.html`.
- JavaScript: If you need custom logic, you can deliver your own script and either:
    - Override the Fluid template to load it instead of `dialog-overlay.js`, or
    - Keep the provided component and extend it in your own script.

### TypoScript

[](#typoscript)

The extension delivers a static TypoScript include titled “Dialog Overlay (CE & FE Rendering)” which registers:

- `tt_content.dialog_overlay` based on `lib.contentElement`
- `templateRootPaths.10 = EXT:dialog_overlay/Resources/Private/Templates/Content`

Opening the dialog manually
---------------------------

[](#opening-the-dialog-manually)

If `data-auto-open="0"`, you can open the dialog from custom code:

```
const el = document.querySelector('fucodo-modal-once');
const dlg = el?.querySelector('dialog');
if (dlg) {
  if (typeof dlg.showModal === 'function') dlg.showModal();
  else dlg.setAttribute('open', '');
}
```

Note: The “shown once” cookie is set when the dialog fires its `close` event. If you close the dialog programmatically, the cookie will also be set by the component.

Known limitations
-----------------

[](#known-limitations)

- Native `` support varies. The component falls back to the `open` attribute if `showModal()` fails, but full focus trapping may differ between browsers. Consider a ponyfill if you need broader guarantees.

Icons
-----

[](#icons)

- The icon identifier for the content type is `content-dialog-overlay`.

Changelog
---------

[](#changelog)

See the project’s VCS history. If you maintain a `Changelog.md` in your distribution, keep extension‑specific entries there.

Support
-------

[](#support)

This extension is part of your site distribution. For issues, please use your project’s regular support channels or your integrator’s contact.

###  Health Score

27

—

LowBetter than 49% of packages

Maintenance67

Regular maintenance activity

Popularity3

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity27

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

3

Last Release

193d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/3c6681704a769ab93a20ba54d94054d0f3f1e81b99341e8cfa29d91f6d8f16fb?d=identicon)[kaystrobach](/maintainers/kaystrobach)

---

Top Contributors

[![kaystrobach](https://avatars.githubusercontent.com/u/1185776?v=4)](https://github.com/kaystrobach "kaystrobach (3 commits)")

### Embed Badge

![Health badge](/badges/fucodo-dialog-overlay/health.svg)

```
[![Health](https://phpackages.com/badges/fucodo-dialog-overlay/health.svg)](https://phpackages.com/packages/fucodo-dialog-overlay)
```

###  Alternatives

[netresearch/rte-ckeditor-image

Image support in CKEditor for the TYPO3 ecosystem - by Netresearch

63991.3k4](/packages/netresearch-rte-ckeditor-image)[christophlehmann/imageoptimizer

Optimize uploaded/processed images with binaries of your choice

46501.8k](/packages/christophlehmann-imageoptimizer)[b13/assetcollector

Add CSS and SVG files and strings as inline style tag/inline svg to the html code.

10118.4k](/packages/b13-assetcollector)[fanor51/headless-container-support

Extension that adds container support for TYPO3 Headless extension

1142.1k](/packages/fanor51-headless-container-support)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)