Docs

Appearance

NXPopup ​

NXPopup is a Joomla site module that displays a configurable popup dialog. It is built on the native HTML <dialog> element, uses vanilla ES6 with no jQuery or third-party libraries, and keeps its dismissal state in browser storage rather than cookies.

Every published module instance is an independent campaign with its own content, audience, open trigger, and dismissal state, so several popups can run on one site without interfering with each other. Joomla's standard menu assignment, publishing, and access controls apply as usual.

Highlights ​

  • Audience targeting — everyone, guests only, or logged-in users only, decided on the server.
  • Three open triggers — after a delay, at a chosen scroll depth, or on exit intent.
  • Page-view gate — leave first-time visitors alone until their Nth page.
  • Per-path dismissal control — decide which close actions actually record a dismissal.
  • Cookie-free — localStorage or sessionStorage, never sent to the server.
  • Accessible by default — native focus trap, Escape to close, restored focus, reduced-motion support.
  • Full visual control — colours, background image, highlighted title words, alignment, optional frame.
  • No jQuery and no external scripts or fonts.

Requirements ​

Joomla5.0 or later (Joomla 6 supported)
PHP8.1 or later
BrowserAny browser supporting <dialog> — Chrome/Edge 37+, Firefox 98+, Safari 15.4+
DependenciesNone

How it fits together ​

The module renders a <dialog> element into the page. On load, the front-end script moves it to the end of <body> so no parent container can clip it, then decides whether to open it:

  1. Audience is checked on the server. Visitors outside the audience never receive the markup.
  2. Dismissal window is checked in browser storage. If the visitor dismissed the popup recently, nothing happens.
  3. Page-view gate counts this view and stops if the threshold has not been reached.
  4. Open trigger arms — a timer, a scroll listener, or an exit-intent listener.

Because the popup opens in the browser's top layer, it is unaffected by your template's z-index, overflow, or transform rules.

Documentation map ​