Modal

Modal 2.0.0 requires:

• PHP: 8.2.0 or newer
• YOOtheme Pro: 5.0.51 or newer
• Joomla: 5.4.9 or newer, or WordPress: 7.1.3 or newer
• Browser: A current version of Chrome, Firefox, Safari or another modern browser

JavaScript is required for Modal interaction, lazy content and Toggle Helper activation.

Modal turns a YOOtheme Pro Builder sublayout into an accessible UIkit dialog. It can display text, media, forms, grids and other Builder elements in a standard dialog, a wide container or a full-screen presentation.

The Modal can be opened by its built-in control, by a compatible external link or directly from a URL fragment.

1. Add Flart Studio → Modal in YOOtheme Pro Builder.
2. Add the required elements to its Sublayout.
3. Keep Content → Edit mode enabled while editing.
4. Configure the title, accessible label, width, closing behavior and optional built-in link.
5. Disable Edit mode and test the Modal on the frontend.

Use ordinary YOOtheme Pro Builder elements inside the Modal, including text, images, buttons, grids, forms, videos and nested layouts. Elements inside the sublayout can use their normal Dynamic Content settings.

Each Modal instance owns its own sublayout and interaction state.

Content → Edit mode exposes the complete Modal sublayout directly in the Builder preview so it can be edited without repeatedly opening the dialog.

Edit mode is authoring-only. While it is enabled, the Modal is not rendered on the public frontend, its assets are not loaded for that instance and its sublayout is excluded from searchable or fallback content. Disable Edit mode when the Modal is ready for visitors.

An empty Modal remains visible as a placeholder in Builder so you can find and populate it. On the public frontend, an empty Modal is not rendered and does not load Modal or Toggle Helper assets.

A structural row and column without a real child element still count as an empty sublayout.

Choose the standard dialog, a YOOtheme container width, expanded width, full screen or a custom width. Custom width accepts values from 240 to 1920 pixels.

Full-screen mode keeps the close control available while oversized content scrolls. You can also control padding, vertical centering, stacking and inner scrolling.

A visible Modal title is used as the dialog's accessible name. For an untitled or full-screen Modal, enter an ARIA Label. If no authored label is available, Modal uses its translated Dialog fallback.

The generated title ID is unique to the Modal instance and is kept separate from public Modal IDs.

Yes. Under the Link settings, configure the text, icon, icon alignment, title, ARIA label, style, size, width, spacing and optional Click Action.

Text and icon may use supported Dynamic Content. If the control contains only an icon, enter an ARIA Label; otherwise Modal uses the translated Show Modal fallback.

Yes. Disable Show the link, enter a unique Modal ID and enable Toggle Helper. Then point a Button, Link or another compatible anchor to that Modal ID.

Enter the ID without a leading #, for example contact-modal.

Assign an explicit Modal ID and enable Toggle Helper. You can then use:

• #contact-modal — open one target.
• #contact-modal,120 — use the same target format with an optional protocol offset.
• #fs-toggle=contact-modal/sidebar — activate several compatible Flart Studio targets in order.

The same fragment can be used in a same-page link or appended to another page URL.

A same-document helper link activates its target without navigating the page. A cross-page link keeps normal browser navigation and activates the target after the destination page loads.

New-tab links, downloads, modified clicks and unsupported fragments keep their native browser behavior. Modal itself does not perform offset scrolling.

Modal IDs must be unique across the complete document. If two IDs are identical or differ only by ASCII letter case, all ambiguous Modal instances and their controls are disabled until the conflict is resolved.

Builder displays a localized notice, and blocked native or Toggle Helper links explain the problem in a tooltip.

Modal uses one runtime-owned #fs-modal-root as the controlled destination for teleported dialogs. If unrelated page content already owns that reserved ID, Modal fails closed instead of moving content into an untrusted or ambiguous container.

Remove or rename the foreign ID. Builder displays a localized ownership notice while the conflict exists.

You can allow closing with the Escape key, a backdrop click and a visible close control. The close control supports the available positions and sizes, including sticky behavior in full-screen layouts.

UIkit manages the dialog interaction and focus containment while the Modal is open.

When Lazy load modal content is enabled, the page initially keeps the complete sublayout inside an inert <template>. The content is materialized immediately before the first opening and trusted Builder scripts are executed once.

This reduces initial DOM work, but content that remains inside the inert template is not available for search indexing. Disable lazy loading when the complete Modal content must be searchable before opening.

Modal follows UIkit's native video lifecycle. Compatible videos can start when the Modal opens and are paused or reset when it closes according to their authored behavior.

Video settings remain owned by the nested Builder element; Modal only coordinates the dialog lifecycle.

Yes. Elements inside the sublayout and source-enabled Modal fields can use YOOtheme Pro Dynamic Content. Product-owned values such as IDs and labels are normalized again after Dynamic Content resolves.

Click Action is intentionally static because it executes JavaScript and therefore does not accept a Dynamic Content mapping.

Yes. Link → Click Action runs custom JavaScript before Modal activation. Returning false or preventing the click event cancels opening for mouse, Enter and Space consistently.

Use this field only for code written by a trusted Builder author. A site Content Security Policy that blocks inline event handlers may prevent the Click Action from running.

The built-in control has button semantics and supports mouse, Enter and Space. UIkit traps focus inside the open dialog and handles Escape according to the selected closing settings.

After closing, UIkit returns focus to the eligible native opener. Toggle Helper also remembers an eligible external opener and restores focus unless the visitor has deliberately moved focus elsewhere.

If Builder replaces a Modal while it is opening or already open, the runtime preserves the valid teleported content and reopens the updated generation when ownership remains unambiguous.

The replacement remains closed if the previous Modal was already closing, its ID changed, Edit mode became active or ID ownership became ambiguous.

UIkit teleports an open Modal outside its original Builder wrapper. Use the documented Modal markers in scoped Custom CSS, including .fs-modal__container, .fs-modal__dialog, .fs-modal__body, .fs-modal__header and .fs-modal__close.

Grouping rules such as @media and @starting-style are projected. Global definitions such as @keyframes, @font-face, @property and @import remain in YOOtheme's native stylesheet and are not copied into the teleported style island.

Yes. Multiple Modal instances can be used on one page as long as their public IDs are unique. The managed runtime also initializes valid Modals inserted by Builder refreshes or loaders and cleans up removed or replaced generations.

If content is inserted through Load More or another loader, that response must also provide the product assets required by the returned layout.

Yes. Modal includes product translations for its Builder fields, descriptions, options, notices, tooltips and frontend fallback labels. YOOtheme Pro continues to translate its native General and Advanced settings.

If a product translation is unavailable, the original English text is used.

• Confirm that the sublayout contains a real child element and Edit mode is disabled.
• Check that the Modal ID is unique and does not include a leading #.
• Enable Toggle Helper when using an external URL or link.
• Hover a disabled control in Builder to read its conflict or availability tooltip.
• Make sure a loader delivered the required assets with dynamically inserted content.
• Clear CMS, YOOtheme, browser and CDN caches after an update.
• Check the browser console for a missing UIkit/runtime file or a Content Security Policy error.