Reveal Modal

Introduction

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

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_X.x.zip: This is the installation file compatible with Joomla 3.x and Joomla 4.x.
• ReadMe.txt: Contains vital information about the current version of the extension.

Installing the Extension

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

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

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

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 (default is rgba(0, 0, 0, 0.5)).
• Popup Background Color: Select the background color of the popup (default is #ffffff).
• Popup Text Color: Select the text color of the popup (default is #000000).
• Close Button Color: Select the color of the close button (default is #000000).
• Popup Padding: Enter the padding around the popup (default is 20px).
• Popup Margin: Enter the margin around the popup (default is 20px).
• Popup Border Radius: Enter the border radius of the popup (default is 5px).

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

Syntax - How to Use

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 Tooltip

{reveal text="Click Here" class="btn btn-outline-primary" height="500px" width="800px"}Your HTML Contents{/reveal}

Example

{reveal text="Click Here" class="btn btn-outline-primary" height="500px" width="800px"}This is the content of the popup.{/reveal}

Replace Click Here, btn btn-outline-primary, 500px, 800px, and Your HTML Contents with your own text, class, height, width, and content respectively.

Features

• Customizable Modals: Add text, links, classes, and colors to your modals.
• Flexible Activation: Choose between various activation methods.
• Position and Style: Customize the modal's position, maximum width, edge offset, and fade times.
• Additional CSS: Add extra CSS for further styling options.

FAQ

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

  • Use the text attribute in the {reveal} syntax.

• Can I customize the appearance of the modal?

  • Yes, you can customize various attributes such as class, height, width, colors, padding, and margin in the plugin settings.

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

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

• Can I add custom CSS to the modal?

  • Yes, enter your custom CSS in the Additional CSS field under Styling Settings.

Troubleshooting

• Modals Not Displaying: Ensure the plugin is enabled and the syntax is correctly added to your content.
• Styling Issues: Check the Additional CSS and other settings for conflicts.