Reveal Modal

Introduction

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)
• 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

Installation

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.3.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.3.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

Configuration

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).

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)
• Modals with HTML content, images, forms, and videos
• Multiple modals on the same page

Usage

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...

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)

Content

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

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

Replace the example values with your own text, class, height, width, and content respectively.

Features

• Simple Shortcode Syntax: Easy-to-use shortcode format that requires no coding knowledge.
• 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 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.

FAQ

• 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.

• 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}, including images, embedded videos, forms, and more.

• 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.

Troubleshooting

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
• Check that HTML content is properly formatted
• Ensure there are no syntax errors in your HTML

5. 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)

6. 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