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
{"change_logs0":{"version":"1.5.4","release_date":"15 August 2026","notes":"
- \r\n
- Responsive media popups on phone, tablet, and landscape: desktop width\/height no longer create a thin vertical video frame<\/li>\r\n
- Video size follows the real aspect ratio (height percentages ignored for type\/src media); safer shortcode parsing and iOS inline playback<\/li>\r\n<\/ul>","items":{"items0":{"type":"change","text":"Responsive media popups on phone, tablet, and landscape: desktop width\/height no longer create a thin vertical video frame"},"items1":{"type":"change","text":"Video size follows the real aspect ratio (height percentages ignored for type\/src media); safer shortcode parsing and iOS inline playback"}},"ordering":"0"},"change_logs1":{"version":"1.5.2","release_date":"14 July 2026","notes":"
- \r\n
- Borderless edge-to-edge media modals \u2014 removed padding\/letterbox bars around YouTube, Vimeo, MP4, and map embeds<\/li>\r\n
- Media videos fill the frame (<code>object-fit: cover<\/code>); mobile sheet padding\/handle skipped for media popups<\/li>\r\n<\/ul>","items":{"items0":{"type":"change","text":"Borderless edge-to-edge media modals \u2014 removed padding\/letterbox bars around YouTube, Vimeo, MP4, and map embeds"},"items1":{"type":"change","text":"Media videos fill the frame (object-fit: cover); mobile sheet padding\/handle skipped for media popups"}},"ordering":"1"},"change_logs2":{"version":"1.5.1","release_date":"14 July 2026","notes":"
- \r\n
- Restored <code>type<\/code> \/ <code>src<\/code> media shortcodes for YouTube, Vimeo, MP4, and Google Maps (with play on open and pause on close)<\/li>\r\n
- Kept legacy <code>jx-reveal-btn<\/code> trigger class for older template\/icon scripts<\/li>\r\n<\/ul>","items":{"items0":{"type":"change","text":"Restored type \/ src media shortcodes for YouTube, Vimeo, MP4, and Google Maps (with play on open and pause on close)"},"items1":{"type":"change","text":"Kept legacy jx-reveal-btn trigger class for older template\/icon scripts"}},"ordering":"2"},"change_logs3":{"version":"1.5","release_date":"13 July 2026","notes":"
- \r\n
- Vanilla JavaScript Rewrite - Removed jQuery dependency; lightweight native modal engine<\/li>\r\n
- Modern 2026 UI - Glass overlay blur, soft ambient shadow, refined typography, circular close control<\/li>\r\n
- Mobile Bottom Sheet - On small screens the dialog slides up as a sheet with a grab handle<\/li>\r\n
- Animation Styles - Per-modal <code>animation=\"scale|fade|slide|none\"<\/code> with optional <code>speed<\/code><\/li>\r\n
- Size Presets - <code>size=\"sm|md|lg|xl|full\"<\/code> plus legacy <code>width<\/code> \/ <code>height<\/code> overrides<\/li>\r\n
- Accessible Dialogs - <code>role=\"dialog\"<\/code>, focus trap, Escape close, focus restore, titled headers via <code>title<\/code><\/li>\r\n
- Deep Link & API - Stable <code>id<\/code> for hash open (<code>#your-id<\/code>) and <code>RevealModal.open()<\/code> \/ <code>RevealModal.close()<\/code><\/li>\r\n
- Confirmation Mode - <code>closebg=\"false\"<\/code> \/ <code>closeesc<\/code> overrides; safer action buttons with <code>close-reveal-modal<\/code><\/li>\r\n
- Media Pause on Close - Videos and iframes stop when the popup is dismissed<\/li>\r\n
- Scroll Lock Fix - Opening a modal no longer jumps the page scroll position<\/li>\r\n
- Layout Fix - Modals relocated to <code><body><\/code> so they never break article spacing inside paragraphs<\/li>\r\n
- Shortcode Examples Tab - Admin parameter tab with copy-to-clipboard examples and attribute reference<\/li>\r\n<\/ul>","items":{"items0":{"type":"change","text":"Vanilla JavaScript Rewrite - Removed jQuery dependency; lightweight native modal engine"},"items1":{"type":"change","text":"Modern 2026 UI - Glass overlay blur, soft ambient shadow, refined typography, circular close control"},"items2":{"type":"change","text":"Mobile Bottom Sheet - On small screens the dialog slides up as a sheet with a grab handle"},"items3":{"type":"change","text":"Animation Styles - Per-modal animation=\"scale|fade|slide|none\" with optional speed"},"items4":{"type":"change","text":"Size Presets - size=\"sm|md|lg|xl|full\" plus legacy width \/ height overrides"},"items5":{"type":"change","text":"Accessible Dialogs - role=\"dialog\", focus trap, Escape close, focus restore, titled headers via title"},"items6":{"type":"change","text":"Deep Link & API - Stable id for hash open (#your-id) and RevealModal.open() \/ RevealModal.close()"},"items7":{"type":"change","text":"Confirmation Mode - closebg=\"false\" \/ closeesc overrides; safer action buttons with close-reveal-modal"},"items8":{"type":"change","text":"Media Pause on Close - Videos and iframes stop when the popup is dismissed"},"items9":{"type":"change","text":"Scroll Lock Fix - Opening a modal no longer jumps the page scroll position"},"items10":{"type":"change","text":"Layout Fix - Modals relocated to so they never break article spacing inside paragraphs"},"items11":{"type":"change","text":"Shortcode Examples Tab - Admin parameter tab with copy-to-clipboard examples and attribute reference"}},"ordering":"3"},"change_logs4":{"version":"1.4","release_date":"12 May 2026","notes":"
- \r\n
- Media Shortcodes - Added <code>type<\/code> and <code>src<\/code> attributes for YouTube, Vimeo, MP4, and Google Maps embeds<\/li>\r\n
- Responsive Media Output - Generated video and iframe markup now scales inside the modal on smaller screens<\/li>\r\n
- Modal Media Playback - Videos and embeds start when a modal opens and stop when it closes<\/li>\r\n
- Deep Linking - Optional plugin setting to open modals from URL hashes and update the address when a modal opens<\/li>\r\n
- Custom Modal IDs - Added optional shortcode <code>id<\/code> attribute for stable deep-link targets<\/li>\r\n
- Shortcode Examples - Updated admin examples for media modals, deep linking, and new shortcode parameters<\/li>\r\n<\/ul>","items":{"items0":{"type":"change","text":"Media Shortcodes - Added type and src attributes for YouTube, Vimeo, MP4, and Google Maps embeds"},"items1":{"type":"change","text":"Responsive Media Output - Generated video and iframe markup now scales inside the modal on smaller screens"},"items2":{"type":"change","text":"Modal Media Playback - Videos and embeds start when a modal opens and stop when it closes"},"items3":{"type":"change","text":"Deep Linking - Optional plugin setting to open modals from URL hashes and update the address when a modal opens"},"items4":{"type":"change","text":"Custom Modal IDs - Added optional shortcode id attribute for stable deep-link targets"},"items5":{"type":"change","text":"Shortcode Examples - Updated admin examples for media modals, deep linking, and new shortcode parameters"}},"ordering":"4"},"change_logs5":{"version":"1.3","release_date":"24 November 2025","notes":"
- \r\n
- Joomla 4, 5 & 6 Compatible - Full support for latest Joomla versions<\/li>\r\n
- Joomla 3.x Support Discontinued - Plugin no longer supports Joomla 3.x<\/li>\r\n
- Modern PHP 8.0+ Support - Updated to use modern PHP syntax and features<\/li>\r\n
- WebAssetManager Integration - Uses Joomla's WebAssetManager for optimal asset loading<\/li>\r\n
- Code Optimization - Refactored code with better structure and private methods<\/li>\r\n
- jx- Prefix Added - All CSS classes now use \"jx-\" prefix for better compatibility<\/li>\r\n
- Shortcode Examples Tab - Built-in comprehensive shortcode examples with copy functionality<\/li>\r\n
- Improved Security - Enhanced input sanitization and XSS protection<\/li>\r\n
- Better Error Handling - Improved code quality and error handling<\/li>\r\n
- Updated Branding - Changed to JoomlaX branding and updated URLs<\/li>\r\n<\/ul>","items":{"items0":{"type":"security","text":"Improved Security - Enhanced input sanitization and XSS protection"},"items1":{"type":"change","text":"Joomla 4, 5 & 6 Compatible - Full support for latest Joomla versions"},"items2":{"type":"change","text":"Joomla 3.x Support Discontinued - Plugin no longer supports Joomla 3.x"},"items3":{"type":"change","text":"Modern PHP 8.0+ Support - Updated to use modern PHP syntax and features"},"items4":{"type":"change","text":"WebAssetManager Integration - Uses Joomla's WebAssetManager for optimal asset loading"},"items5":{"type":"change","text":"Code Optimization - Refactored code with better structure and private methods"},"items6":{"type":"change","text":"jx- Prefix Added - All CSS classes now use \"jx-\" prefix for better compatibility"},"items7":{"type":"change","text":"Shortcode Examples Tab - Built-in comprehensive shortcode examples with copy functionality"},"items8":{"type":"change","text":"Better Error Handling - Improved code quality and error handling"},"items9":{"type":"change","text":"Updated Branding - Changed to JoomlaX branding and updated URLs"}},"ordering":"5"},"change_logs6":{"version":"1.2","release_date":"07 February 2023","notes":"
- \r\n
- Supports PHP version 8<\/li>\r\n
- Joomla Update System Integrated<\/li>\r\n
- Simpler Plugin Syntax<\/li>\r\n
- Supports Joomla 4<\/li>\r\n
- New parameters to control the popup styling added to the plugin parameters.<\/li>\r\n<\/ul>","items":{"items0":{"type":"change","text":"Supports PHP version 8"},"items1":{"type":"change","text":"Joomla Update System Integrated"},"items2":{"type":"change","text":"Simpler Plugin Syntax"},"items3":{"type":"change","text":"Supports Joomla 4"},"items4":{"type":"change","text":"New parameters to control the popup styling added to the plugin parameters."}},"ordering":"6"}}
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="/index.php/images/corporate/small/1.jpg" />
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="/index.php/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.