Get Started

Reveal Modal is a Joomla plugin that allows you to create customizable modal popups in your Joomla content using simple shortcodes. This documentation covers the installation, configuration, and usage of the Reveal Modal plugin.

Key Features:

• Simple shortcode syntax for easy implementation
• Fully customizable styling (colors, padding, margin, border radius)
• Built-in media shortcodes for YouTube, Vimeo, MP4, and Google Maps
• Responsive media output with automatic playback control
• Optional deep linking from URL hashes
• Support for any HTML content (text, images, forms, videos)
• Multiple modals on the same page
• Responsive design that works on all devices
• Joomla 4, 5 & 6 compatible

Downloading the Extension

Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.

Store: Alternatively, you can download the extension from the "Downloads" section in our store. If you are a new user, you need to create an account using the same email address you used for the purchase.

Click to download the extension package: RevealModal_UNZIP.zip

Unzipping the Package

Use any file unzipper tool or WinRAR to unzip the RevealModal_UNZIP.zip package. After unzipping, you will find the following contents:

• plg_sys_reveal_v1.4.zip: This is the installation file compatible with Joomla 4.x, 5.x, and 6.x.
• ReadMe.txt: Contains vital information about the current version of the extension.

Note: This plugin supports Joomla 4.x, 5.x, and 6.x only. Support for Joomla 3.x has been discontinued.

Installing the Extension

To install the extension, log in to the backend of your Joomla website.

• For Joomla 4, 5 & 6: Navigate to Extensions > Manage > Install, then click on the "Upload Package File" tab. Click "Browse" to select the appropriate installation file (plg_sys_reveal_v1.4.zip), then click "Upload and Install."

A success message will be displayed once the installation is complete.

Requirements:

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

After installation, the plugin needs to be configured to suit your requirements. Access the plugin settings by navigating to Extensions > Plugins, and find System - Reveal Modal in the list.

Styling Settings

• Background Overlay Color: Select the background color of the overlay that appears behind the modal (default is rgba(0, 0, 0, 0.5)).
• Popup Background Color: Select the background color of the modal popup (default is #ffffff).
• Popup Text Color: Select the text color inside the modal popup (default is #000000).
• Close Button Color: Select the color of the close button (X) (default is #000000).
• Popup Padding: Enter the padding around the popup content (default is 20px). You can use single values like 20px or multiple values like 15px 20px.
• Popup Margin: Enter the margin around the popup (default is 20px). You can use single values like 20px or multiple values like 15px 20px.
• Popup Border Radius: Enter the border radius for rounded corners (default is 5px).

Behavior Settings

• Enable Deep Linking: When enabled, modals can be opened from URL hashes such as #watch-video and the address bar is updated when a modal opens.

Once configured, you can use the Reveal Modal plugin to create popups in your Joomla content.

Shortcode Examples Tab

The plugin includes a comprehensive "Shortcode Examples" tab with ready-to-use examples. Each example includes a copy button for easy implementation. This tab provides examples for:

• Simple text link modals
• Modals with custom CSS classes
• Different modal sizes (small, large, full width)
• Media modals for YouTube, Vimeo, MP4, and Google Maps
• Deep-linkable modals with custom id values
• Modals with HTML content, images, and forms
• Multiple modals on the same page

Basic Syntax

Here is the syntax to integrate modal popups into your content. Write the code in your article where you want to show the plugin.

Simple Modal

{reveal text="Click Here" width="500px" height="400px"}Your HTML Contents{/reveal}

Example:

{reveal text="Click Here" width="500px" height="400px"}This is the content of the popup.{/reveal}

Modal with Custom CSS Class

{reveal text="Open Modal" class="btn btn-primary" width="600px" height="500px"}

Modal Title

Your content here...

Media Modal

Use type and src to let the plugin generate responsive media markup for you:

{reveal text="Watch Video" type="youtube" src="https://www.youtube.com/watch?v=VIDEO_ID" width="90%" height="80%"}{/reveal}

{reveal text="Watch Video" type="mp4" src="https://example.com/video.mp4" width="90%" height="80%"}{/reveal}

{reveal text="View Map" type="map" src="https://www.google.com/maps/embed?pb=YOUR_EMBED_CODE" width="90%" height="80%"}{/reveal}

Deep Link Modal

{reveal text="Watch Video" id="watch-video" type="mp4" src="https://example.com/video.mp4" width="90%" height="80%"}{/reveal}

When deep linking is enabled, the modal can be opened from #watch-video.

Available Parameters

• text: The text that appears as the clickable link/button (required)
• width: Modal width in pixels or percentage (default: 500px)
• height: Modal height in pixels or percentage (default: 500px)
• class: Custom CSS class to add to the trigger link (optional)
• type: Media type for generated embeds: youtube, vimeo, mp4, video, map, googlemap, or googlemaps (optional)
• src: Media URL, video ID, or Google Maps embed URL used with type (optional)
• id: Custom modal ID for deep linking and stable URLs (optional)

Content

Between {reveal} and {/reveal}, you can add any HTML content including:

• Text and formatted content
• Images
• Forms
• Videos (embedded iframes or generated media shortcodes)
• Lists, tables, and other HTML elements

When type and src are used, the plugin generates the media markup automatically and the modal body can be left empty.

• Simple Shortcode Syntax: Easy-to-use shortcode format that requires no coding knowledge.
• Built-in Media Shortcodes: Generate responsive YouTube, Vimeo, MP4, and Google Maps embeds with type and src.
• Modal Media Playback: Start media when a modal opens and stop it when the modal closes.
• Deep Linking: Optionally open modals from URL hashes and update the address bar when a modal opens.
• Fully Customizable Styling: Control background overlay, popup background, text color, close button color, padding, margin, and border radius.
• Flexible Modal Dimensions: Set custom width and height for each modal individually (pixels or percentage).
• Multiple Modals Support: Display multiple modals on the same page with different content and sizes.
• Rich Content Support: Display any HTML content including text, images, forms, videos, and more.
• Smooth Animations: Beautiful fade and pop animations for opening and closing modals.
• User-Friendly Controls: Close modals by clicking the X button, clicking outside, or pressing ESC key.
• Custom CSS Classes: Add custom CSS classes to modal triggers for advanced styling.
• Responsive Design: Modals and generated media automatically adapt to different screen sizes for optimal viewing.
• Shortcode Examples Tab: Built-in comprehensive shortcode examples with copy-to-clipboard functionality.
• Joomla 4, 5 & 6 Compatible: Fully compatible with latest Joomla versions with modern PHP 8.0+ support.
• Optimized Performance: Uses Joomla's WebAssetManager for optimal asset loading and caching.

• How do I change the text of the modal link?

  • Use the text attribute in the {reveal} syntax. Example: {reveal text="My Custom Text"}

• Can I customize the appearance of the modal?

  • Yes, you can customize various attributes in the plugin settings including background overlay color, popup background color, text color, close button color, padding, margin, and border radius. You can also add custom CSS classes to individual modal triggers.

• What is the syntax for adding modals to my content?

  • Use the {reveal text="Click Here" width="500px" height="400px"}Your HTML Contents{/reveal} syntax in your Joomla articles or custom HTML modules.

• How do I embed YouTube, Vimeo, MP4, or Google Maps videos?

  • Use the type and src attributes on the opening shortcode. Example: {reveal text="Watch Video" type="youtube" src="https://www.youtube.com/watch?v=VIDEO_ID" width="90%" height="80%"}{/reveal}

• Do videos play automatically when the modal opens?

  • Yes. Media inside a modal starts when the modal opens and stops when the modal is closed with the X button, overlay click, or ESC key.

• Can I open a modal from a URL hash?

  • Yes. Enable Deep Linking in the plugin settings, then use a custom id on the shortcode such as id="watch-video". The modal can then be opened from #watch-video.

• Can I use multiple modals on the same page?

  • Yes, you can add multiple modals on the same page. Each modal automatically gets a unique identifier to prevent conflicts.

• How do I close a modal?

  • You can close a modal by clicking the X button, clicking outside the modal (on the overlay), or pressing the ESC key on your keyboard.

• Can I add images or videos to the modal?

  • Yes, you can add any HTML content between {reveal} and {/reveal}, or use the built-in media shortcode attributes for YouTube, Vimeo, MP4, and Google Maps.

• What Joomla versions are supported?

  • The plugin supports Joomla 4.x, 5.x, and 6.x. Support for Joomla 3.x has been discontinued in version 1.3.

• Where can I find shortcode examples?

  • The plugin includes a "Shortcode Examples" tab in the plugin parameters with comprehensive examples and copy-to-clipboard functionality.

Common Issues and Solutions:

1. Modals Not Displaying:

• Ensure the plugin is enabled in Extensions > Plugins
• Check that the shortcode syntax is correct (opening and closing tags match)
• Verify that the text parameter is provided
• Check browser console for JavaScript errors

2. Styling Issues:

• Check the plugin's styling settings in the plugin parameters
• Verify that your template's CSS is not overriding the modal styles
• Use custom CSS classes to override default styles if needed
• Check that color values are in the correct format (hex or rgba)

3. CSS/JS Not Loading:

• The plugin uses Joomla's WebAssetManager for asset loading
• Ensure you're using Joomla 4.x, 5.x, or 6.x
• Check that jQuery is available (loaded by Joomla core)
• Clear Joomla cache and browser cache

4. Modal Content Not Showing:

• Verify that content is placed between {reveal} and {/reveal} tags, or that type and src are provided for generated media modals
• Check that HTML content is properly formatted
• Ensure there are no syntax errors in your HTML

5. Media Not Playing or Not Responsive:

• Use the built-in type and src shortcode attributes for YouTube, Vimeo, MP4, and Google Maps
• For Google Maps, use the embed URL from Google Maps Share > Embed a map
• Check that your article text filter allows iframes and video markup when using custom HTML
• Clear Joomla cache and browser cache after updating the plugin

6. Deep Linking Not Working:

• Enable Deep Linking in the plugin's Behavior Settings
• Use a custom id on the shortcode for readable URLs such as #watch-video
• Ensure the hash matches the modal ID exactly

7. Multiple Modals Not Working:

• Each modal should have unique content
• Ensure each {reveal} tag has a corresponding {/reveal} tag
• Check that modal IDs are not conflicting (handled automatically by the plugin unless custom id values are used)

8. Close Button Not Working:

• Check browser console for JavaScript errors
• Ensure jQuery is loaded properly
• Try clicking outside the modal or pressing ESC key as alternatives