Reveal Modal
Popup Modal Plugin for Joomla
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}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}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}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}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}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>Use a small modal for confirmations. Disable backdrop dismiss with closebg="false" when the choice matters.
Shortcode
{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.