Plugin
Popup and iframesReveal Modal
Popup Modal Plugin for Joomla
Instant access after purchaseOne-click Joomla updatesLifetime option available
30-day money-back guarantee
Works with
Joomla 4 Joomla 5 Joomla 6
Changelog — Reveal Modal
Version 1.5.4: 15 August 2026
- Responsive media popups on phone, tablet, and landscape: desktop width/height no longer create a thin vertical video frame
- Video size follows the real aspect ratio (height percentages ignored for type/src media); safer shortcode parsing and iOS inline playback
Version 1.5.2: 14 July 2026
- Borderless edge-to-edge media modals — removed padding/letterbox bars around YouTube, Vimeo, MP4, and map embeds
- Media videos fill the frame (
object-fit: cover); mobile sheet padding/handle skipped for media popups
Version 1.5.1: 14 July 2026
- Restored
type/srcmedia shortcodes for YouTube, Vimeo, MP4, and Google Maps (with play on open and pause on close) - Kept legacy
jx-reveal-btntrigger class for older template/icon scripts
Version 1.5: 13 July 2026
- Vanilla JavaScript Rewrite - Removed jQuery dependency; lightweight native modal engine
- Modern 2026 UI - Glass overlay blur, soft ambient shadow, refined typography, circular close control
- Mobile Bottom Sheet - On small screens the dialog slides up as a sheet with a grab handle
- Animation Styles - Per-modal
animation="scale|fade|slide|none"with optionalspeed - Size Presets -
size="sm|md|lg|xl|full"plus legacywidth/heightoverrides - Accessible Dialogs -
role="dialog", focus trap, Escape close, focus restore, titled headers viatitle - Deep Link & API - Stable
idfor hash open (#your-id) andRevealModal.open()/RevealModal.close() - Confirmation Mode -
closebg="false"/closeescoverrides; safer action buttons withclose-reveal-modal - Media Pause on Close - Videos and iframes stop when the popup is dismissed
- Scroll Lock Fix - Opening a modal no longer jumps the page scroll position
- Layout Fix - Modals relocated to
<body>so they never break article spacing inside paragraphs - Shortcode Examples Tab - Admin parameter tab with copy-to-clipboard examples and attribute reference
Version 1.4: 12 May 2026
- Media Shortcodes - Added
typeandsrcattributes for YouTube, Vimeo, MP4, and Google Maps embeds - Responsive Media Output - Generated video and iframe markup now scales inside the modal on smaller screens
- Modal Media Playback - Videos and embeds start when a modal opens and stop when it closes
- Deep Linking - Optional plugin setting to open modals from URL hashes and update the address when a modal opens
- Custom Modal IDs - Added optional shortcode
idattribute for stable deep-link targets - Shortcode Examples - Updated admin examples for media modals, deep linking, and new shortcode parameters
Version 1.3: 24 November 2025
- Joomla 4, 5 & 6 Compatible - Full support for latest Joomla versions
- Joomla 3.x Support Discontinued - Plugin no longer supports Joomla 3.x
- Modern PHP 8.0+ Support - Updated to use modern PHP syntax and features
- WebAssetManager Integration - Uses Joomla's WebAssetManager for optimal asset loading
- Code Optimization - Refactored code with better structure and private methods
- jx- Prefix Added - All CSS classes now use "jx-" prefix for better compatibility
- Shortcode Examples Tab - Built-in comprehensive shortcode examples with copy functionality
- Improved Security - Enhanced input sanitization and XSS protection
- Better Error Handling - Improved code quality and error handling
- Updated Branding - Changed to JoomlaX branding and updated URLs
Version 1.2: 07 February 2023
- Supports PHP version 8
- Joomla Update System Integrated
- Simpler Plugin Syntax
- Supports Joomla 4
- New parameters to control the popup styling added to the plugin parameters.
DemoExample 1 — Text & image popup
Classic HTML content inside a modal: image + copy. Close with the × button, Escape, or by clicking the backdrop.
{reveal text="Click to open popup" class="btn btn-primary" size="lg" title="About this story" animation="scale"}
<img src="/images/corporate/small/1.webp" />
Your HTML content here…
{/reveal}DemoExample 2 — Animation styles
DemoExample 3 — Sizes
Use size="sm|md|lg|xl|full", or set exact width / height like the original shortcode.
{reveal text="Small" size="sm"}…{/reveal}
{reveal text="Large" size="lg"}…{/reveal}
{reveal text="Custom" width="800px" height="500px"}…{/reveal}DemoExample 4 — Titled dialog
Add title="…" for a proper heading wired to aria-labelledby — better for accessibility and scanning.
{reveal text="Open titled dialog" class="btn btn-primary" title="Welcome to Reveal Modal"}
<p>Accessible dialog content…</p>
{/reveal}DemoExample 5 — Video HTML embed
Drop iframes or HTML5 video into the modal body. Media pauses automatically when the popup closes.
{reveal text="Watch iframe video" size="lg" title="Product walkthrough"}
<div class="reveal-modal__media">
<iframe src="https://www.youtube.com/embed/VIDEO_ID" title="Demo video" allowfullscreen></iframe>
</div>
{/reveal}DemoExample 6 — Media shortcode (type + src)
Use type and src to auto-generate responsive embeds. The body can be empty. Supports youtube, vimeo, mp4 / video, and map / googlemap. Playback starts on open and stops on close.
{reveal text="Watch Video" type="youtube" src="https://www.youtube.com/watch?v=VIDEO_ID" width="90%" height="80%"}{/reveal}
{reveal text="Watch MP4" type="mp4" src="/images/videos/demo.mp4" width="40%" height="70%"}{/reveal}
{reveal text="View Map" type="map" src="https://www.google.com/maps/embed?pb=YOUR_EMBED" width="90%" height="80%"}{/reveal}DemoExample 7 — Deep link / hash open
Give the modal a stable id, then open it from any link with #your-id — or call RevealModal.open('your-id') from your own scripts.
{reveal text="Hash-ready modal" id="reveal-demo-hash" title="Opened via hash or API"}…{/reveal}
<a href="#reveal-demo-hash">Open via hash</a>DemoExample 8 — Confirmation / CTA
Use a small modal for confirmations. Disable backdrop dismiss with closebg="false" when the choice matters.
{reveal text="Delete item…" size="sm" title="Confirm delete" closebg="false"}
<p>Are you sure?</p>
<button class="close-reveal-modal">Cancel</button>
{/reveal}
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.