Appearance
Styling
Most visual changes are available as module settings. This page covers the CSS layer underneath, for when you need more than the settings offer.
Markup structure
html
<dialog class="nxpopup" style="--nxpopup-bg: …">
<div class="nxpopup__frame" tabindex="-1">
<button class="nxpopup__close">…</button>
<div class="nxpopup__inner">
<h2 class="nxpopup__title">…</h2>
<div class="nxpopup__body">…</div>
<div class="nxpopup__actions">
<a class="nxpopup__cta">…</a>
</div>
</div>
</div>
</dialog>| Element | Role |
|---|---|
.nxpopup | The <dialog> itself — rounded clipping and open/close transitions. |
.nxpopup--bordered | Added when Render Popup Border is on. |
.nxpopup__frame | Optional white frame; also the initial focus target. |
.nxpopup__inner | The visual card, carrying the background image. |
body.nxpopup-open | Added to <body> while any popup is open, locking page scroll. |
Custom properties
The template sets these on the dialog element from your module settings. Overriding them is the cleanest way to restyle a popup:
| Property | Setting it comes from |
|---|---|
--nxpopup-bg | Background Color |
--nxpopup-image | Background Image |
--nxpopup-image-position | Background Position |
--nxpopup-image-size | Background Size |
--nxpopup-title-highlight | Title Highlight Color |
--nxpopup-title-align | Title Alignment |
--nxpopup-content-align | Content Alignment |
--nxpopup-button-bg | Button Background Color |
--nxpopup-button-color | Button Text Color |
--nxpopup-button-border | Button Border Color |
Targeting one campaign
Use the Module Class Suffix field (Advanced tab) to add your own class, then scope your rules to it:
css
.nxpopup.my-campaign .nxpopup__inner {
width: 480px;
height: auto;
}
.nxpopup.my-campaign .nxpopup__title {
font-size: 2rem;
}Each instance also has a unique ID of the form #mod-nxpopup-<module id> if you need to be more specific.
Default dimensions
The card is 600 × 600 on desktop. Below 640px it becomes full width, with a height floor capped to the viewport so it always fits.
To make a card that sizes to its content instead:
css
.nxpopup.my-campaign .nxpopup__inner {
width: min(600px, 100%);
height: auto;
}The backdrop
The dimmed overlay is the native ::backdrop pseudo-element:
css
.nxpopup.my-campaign::backdrop {
background: rgba(0, 0, 0, 0.75);
}Animation
Open and close are driven by CSS transitions on opacity and transform, using @starting-style and transition-behavior: allow-discrete. The default is roughly 280ms.
Any custom transition should keep opacity or transform among the animated properties — the script waits for one of those to finish before closing the dialog, with a 400ms safety timeout.
All animation is disabled automatically for visitors with prefers-reduced-motion: reduce.
Template overrides
For structural changes beyond CSS, copy the module's layout into your template:
templates/YOUR_TEMPLATE/html/mod_nxpopup/default.phpThen select it under Layout on the Advanced tab. The layout receives pre-validated variables — see the docblock at the top of the file for the full list.
Keep the hooks intact
The front-end script depends on [data-nxpopup], [data-nxpopup-close], [data-nxpopup-config], and .nxpopup__frame. Removing any of these will stop the popup working.
Loading behaviour
The module emits its own <link> and <script type="module"> tags rather than using Joomla's Web Asset Manager. A site module renders after the document head is built, so asset-manager registration would arrive too late and be dropped.
Each instance emits the same URLs, which the browser de-duplicates — a same-URL ES module is fetched and evaluated once. This keeps every cached module fragment self-contained. URLs are cache-busted by file modification time, so updates are picked up without a hard refresh.