Modal builder for YOOtheme Pro
In short: You choose from four triggers: click, timer, scroll depth and exit intent. How often a visitor sees the dialog is stored in browser storage, not in a cookie. You build the content from builder elements, and focus handling and role=dialog follow WCAG 2.1 AA. Twelve months cost €10 plus VAT, added at checkout by CopeCart.
- Four triggers: click, timer from second 0, scroll depth in 5 percent steps, exit intent at the window edge
- Display frequency in browser storage instead of a cookie: every time, once per session, once forever or every X days
- role=dialog, aria-modal, focus moves to the title on open and back to the trigger on close
- Up to three footer buttons: close, link or open the next step via modal ID
- Video starts on open and pauses on close, for HTML5 video, YouTube and Vimeo
- Reference mode: several buttons open the same modal without duplicating the content
- CSS field on the element whose selectors are automatically scoped to the ID of this modal
Annual license with updates & support - as a one-time purchase or subscription. A subscription renews automatically; a one-time purchase expires after 12 months.
- License term: 1 year
- Websites: Unlimited own projects
- Updates & support during the term
- Secure payment & invoice via CopeCart
- Digital product: the right of withdrawal expires once the download is provided.
Need Modal for another platform?
Tell me what you need it for. That shows me where another version is worth building.
You'll receive a confirmation email shortly. If nothing arrives within 15 minutes, not even in your spam folder, something went wrong on our end - please send your request again.
- Version
- 1.1.5
- Updated
- 28 Sept 2026
- Compatible with
- YOOtheme Pro 5 · Joomla
About this product
The Modal element adds a dialog to the YOOtheme Pro builder that opens on more than just a click. You build the content from builder elements, pick the trigger in the same element and decide how often a visitor sees the dialog. Runs on Joomla 5 and 6 with YOOtheme Pro 4.x and 5.x, based on UIkit 3.
Four triggers and automatic closing
The Standard type opens the modal via a button or text link that you style in the element itself. Auto-Open opens after a delay in seconds, where 0 means immediately. Scroll-Triggered waits for a scroll depth between 5 and 100 percent, in steps of 5. Exit-Intent reacts as soon as the mouse pointer leaves the top edge of the window. If you like, the dialog closes itself after a set number of seconds, and a video inside the modal starts on open and pauses on close, for HTML5 video as well as YouTube and Vimeo.
Display frequency without cookies
For the three automatic triggers you define how often the dialog appears: on every page view, once per session, exactly once and never again, or again after a set number of days. This is stored in the browser's sessionStorage or localStorage, under a key derived from the modal ID. No cookie is set, no third-party script is loaded, and the value never leaves the browser.
Built according to WCAG 2.1 AA
The dialog carries role=dialog and aria-modal=true and is linked to its heading via aria-labelledby. Without a visible heading, you set your own label in the ARIA Label field. On open, focus moves to the modal title; on close, it returns to the element that opened the dialog. The Escape key is active by default, the close button has a translated label, and triggers without visible text get their own ARIA label. These are exactly the points where dialogs usually fail audits under BITV 2.0 and EN 301 549.
Width, layout and up to three footer buttons
Three width modes: Dialog at the UIkit default width, Container at the width of your page layout, Full Screen across the whole window. On top of that come four padding levels, vertical centering, a separate scroll area for long content and eight opening animations. In the footer you place up to three buttons, each with text, icon, eight styles, three sizes and a left, center or right position.
Multi-step flows and multiple triggers
A footer button of type Step closes the current dialog and opens the next one via its modal ID, so you can chain several modals into a flow, such as notice, choice, confirmation. With the stacking option enabled, the previous dialog stays visible in the background. The reference mode works the other way round: it only creates a trigger for a modal placed elsewhere on the page, so several buttons open the same dialog without duplicating its content. A CSS field on the element automatically scopes every selector to the ID of this modal.
Frequently asked questions
Which versions does the modal work with?
With YOOtheme Pro 5 on Joomla 5 and 6, PHP 8.2 or newer. The element is not available for WordPress.
Which triggers are available?
Four: a click on a button or text link, a timer from second 0, scroll depth in 5 percent steps and exit intent at the top edge of the window.
Does the modal set cookies to remember whether it was shown?
No. How often the dialog appears is stored by the browser in sessionStorage or localStorage. No third-party script is loaded, and the value never leaves the browser.
Can several buttons open the same modal?
Yes, via the reference mode. The content then exists only once on the page.
Can I show several modals one after another?
Yes. A footer button of type Step closes the current dialog and opens the next one via its modal ID.
Is the dialog accessible?
It is built according to WCAG 2.1 AA: role=dialog and aria-modal, focus moves to the title on open and back to the trigger on close. Escape closes the dialog.
How much does the license cost?
€10 per year plus VAT for an unlimited number of your own projects, including updates and support during the term. As a subscription it renews automatically; as a one-time purchase it ends after 12 months.
How do I get updates?
Through the Joomla update manager. To do this, enter the download key from your customer account under System → Update Sites.
Reviews
There are no reviews for this product yet.
Only customers who have purchased this product can review it.