Get Started

Reveal Modal is a Joomla system plugin for creating modern modal popups with a simple {reveal}…{/reveal} shortcode. Version 1.5 is vanilla JavaScript (no jQuery), with a 2026 glass UI, accessible dialogs, animations, size presets, hash open, and a Shortcode Examples tab in the plugin parameters.

Key Features:

• Vanilla JS — no jQuery dependency
• Modern glass overlay UI and mobile bottom sheet
• Animations: scale, fade, slide, none
• Sizes: sm, md, lg, xl, full (+ width/height)
• Accessible dialogs with focus trap and Escape
• Deep link via id / hash and RevealModal JS API
• Any HTML content (text, images, video, buttons)
• Shortcode Examples tab with copy-to-clipboard
• Joomla 4, 5 & 6 compatible

Downloading the Extension

Email: After purchase you receive an email with a download link.

Store: Or download from the Downloads section at joomlax.com using the same purchase email.

Download package: RevealModal_UNZIP.zip

Unzipping

Unzip the package. Inside you will find:

• plg_system_reveal_v1.5.zip — install for Joomla 4.x, 5.x, and 6.x
• ReadMe.txt — version notes

Installing

In the Joomla admin: System → Install → Extensions (or Extensions → Manage → Install). Upload plg_system_reveal_v1.5.zip and install.

Then enable System - Reveal Modal under System → Plugins.

Requirements:

• Joomla 4.x, 5.x, or 6.x
• PHP 8.0+

Open System → Plugins → System - Reveal Modal.

Behaviour

• Default Animation — scale, fade, slide, or none when the shortcode omits animation
• Animation Speed (ms) — default open/close duration (e.g. 280)
• Close on Backdrop Click — dismiss when clicking the overlay
• Close on Escape — dismiss with the Escape key

Styling Settings

• Background Overlay Color — default rgba(9, 9, 11, 0.52)
• Overlay Blur — e.g. 14px (or 0 to disable)
• Popup Background / Text / Close Button colours
• Popup Padding — default 1.75rem
• Popup Margin — overlay inset / outer margin
• Popup Border Radius — default 1.25rem

Shortcode Examples Tab

Copy-ready examples for basic popups, sizes, animations, video, hash open, confirmations, attribute reference, and the JS API.

Basic Syntax

{reveal text="Click Here"}Your HTML content here…{/reveal}

Attribute Reference

• text — Trigger label (default: Open)
• class — Extra CSS classes on the trigger (e.g. btn btn-primary)
• title — Dialog heading (wired to aria-labelledby)
• id — Stable modal id for hash / JS API
• size — sm | md | lg | xl | full
• width — Exact max-width (e.g. 800px)
• height — Exact max-height (e.g. 500px)
• animation — scale | fade | slide | none
• speed — Animation duration in ms
• closebg — true | false — close on backdrop click
• closeesc — true | false — close on Escape

Examples

Button trigger + title

{reveal text="Open dialog" class="btn btn-primary" title="Welcome"}Hello from Reveal Modal.{/reveal}

Size presets

{reveal text="Small" size="sm" title="Notice"}Compact message.{/reveal}
{reveal text="Large" size="lg" title="Details"}Longer content.{/reveal}
{reveal text="Full width" size="full" title="Wide"}Nearly full viewport.{/reveal}

Custom width / height

{reveal text="Custom size" width="800px" height="500px" title="Custom"}Fixed max size.{/reveal}

Animations

{reveal text="Scale" animation="scale" speed="400"}Scale + fade.{/reveal}
{reveal text="Fade" animation="fade" speed="400"}Opacity only.{/reveal}
{reveal text="Slide" animation="slide" speed="400"}Rises from below.{/reveal}

Image + text

{reveal text="About this story" class="btn btn-primary" size="lg" title="About this story"}
<img src="images/sample.jpg" alt="" style="float:left;margin:0 1rem 0.75rem 0;max-width:140px" />
Your article copy goes here…
{/reveal}

Video / iframe

{reveal text="Watch video" class="btn btn-primary" size="lg" title="Product walkthrough"}
<div class="reveal-modal__media">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID" title="Demo video" allowfullscreen loading="lazy"></iframe>
</div>
{/reveal}

Media pauses automatically when the popup closes.

Hash / deep link

{reveal text="Hash-ready modal" id="welcome-modal" title="Welcome"}Opened via hash or API.{/reveal}
<a href="#welcome-modal">Open via #welcome-modal</a>

Confirmation (no backdrop close)

{reveal text="Delete item…" class="btn btn-danger" size="sm" title="Confirm delete" closebg="false"}
<p>Are you sure? This cannot be undone.</p>
<button type="button" class="btn btn-secondary close-reveal-modal">Cancel</button>
<button type="button" class="btn btn-danger close-reveal-modal">Yes, delete</button>
{/reveal}

JavaScript API

RevealModal.open('welcome-modal');
RevealModal.close();

Place shortcodes in articles or Custom HTML modules.

• Vanilla JavaScript — No jQuery; lightweight native modal engine
• 2026 UI — Glass overlay, soft shadow, refined type, circular close
• Mobile bottom sheet — Sheet layout with grab handle on small screens
• Animations — scale, fade, slide, none + speed
• Size presets — sm | md | lg | xl | full
• Accessibility — Dialog role, focus trap, Escape, focus restore, titled headers
• Deep link & API — Hash open with id; RevealModal.open() / close()
• Confirmation mode — closebg="false" and close-reveal-modal buttons
• Rich HTML — Text, images, video/iframe, forms, CTAs
• Media pause on close — Stops video/iframe playback when dismissed
• Brand styling — Overlay, blur, colours, padding, radius from plugin params
• Shortcode Examples tab — Copy-to-clipboard admin reference
• Joomla 4 / 5 / 6 — Modern PHP-ready system plugin

• Does Reveal Modal need jQuery?

  • No. v1.5 is pure vanilla JavaScript.

• What is the basic shortcode?

  • {reveal text="Click Here"}Your content{/reveal}

• Which attributes are supported?

  • text, class, title, id, size, width, height, animation, speed, closebg, closeesc.

• How do I change the trigger label?

  • Use text="My label" on the opening shortcode.

• How do I style the trigger as a button?

  • Add class="btn btn-primary" (or your template’s button classes).

• How do I set the modal size?

  • Use size="sm|md|lg|xl|full", or set exact width / height.

• How do I choose an animation?

  • Set animation="scale", fade, slide, or none. Optional speed="400".

• Can I add a title heading?

  • Yes — title="Welcome" adds an accessible dialog heading.

• How do I open a modal from a URL hash?

  • Set id="welcome-modal", then link to #welcome-modal or call RevealModal.open('welcome-modal').

• How do I embed a YouTube video?

  • Put an iframe (ideally inside .reveal-modal__media) between the shortcode tags. Playback pauses when the modal closes.

• How do I make a confirmation popup?

  • Use closebg="false" and action buttons with class close-reveal-modal.

• Can I customize colours and blur?

  • Yes — in plugin Styling Settings (overlay, blur, background, text, close colour, padding, margin, radius).

• Can I use multiple modals on one page?

  • Yes. Each gets a unique id automatically, or set your own with id.

• How do I close a modal?

  • × button, backdrop click (if enabled), Escape (if enabled), or a close-reveal-modal button.

• Where are shortcode examples?

  • Plugin parameters → Shortcode Examples tab (copy buttons included).

• Which Joomla versions are supported?

  • Joomla 4.x, 5.x, and 6.x (PHP 8.0+).

• Where should I place shortcodes?

  • In articles or Custom HTML modules — not in CSS files.

1. Modal does not open

• Enable System - Reveal Modal
• Check shortcode has matching {reveal} / {/reveal}
• Clear Joomla and browser cache
• Check the browser console for JS errors

2. Animation looks instant / missing

• Hard-refresh so reveal.js / reveal.css reload
• Confirm animation is one of scale, fade, slide, none
• Try a higher speed (e.g. 400)

3. Styling looks wrong

• Review Styling Settings (overlay, blur, colours, radius)
• Template CSS may override — add a custom class on the trigger if needed

4. Hash / deep link not opening

• Set a stable id on the shortcode
• Ensure the link hash matches exactly (e.g. #welcome-modal)
• Test with RevealModal.open('welcome-modal') in the console

5. Video keeps playing after close

• Update to v1.5+ (media pause on close)
• Prefer wrapping iframes in .reveal-modal__media

6. Huge gaps / layout jumps in the article

• v1.5 moves modal panels to <body> and locks scroll without jumping
• Clear cache after upgrading

7. Backdrop will not close on confirm dialogs

• Expected when closebg="false" — use Cancel / Confirm buttons with close-reveal-modal

8. Assets not loading

• No jQuery is required in v1.5
• Confirm the plugin is enabled and cache is cleared