Get Started

Pop Any Module is a powerful Joomla extension that allows you to display any Joomla module inside a beautiful popup/modal window. The extension consists of two components: a Content Plugin and a Module, giving you flexible options to trigger module popups from anywhere in your content.

Key Features:

• Content Plugin: Use shortcodes in articles to display modules in popups
• Module Component: Display modules in popups using a dedicated module position
• Display any Joomla module (Custom HTML, Login, Menu, etc.) in popup windows
• Three animation effects: None, Fade, and Elastic
• Customizable animation speeds (Auto: Slow/Normal/Fast or User-defined milliseconds)
• Adjustable popup dimensions (width and height)
• Customizable overlay opacity
• Custom trigger elements (buttons, links, images, etc.)
• Additional CSS support for custom styling
• Uses Fancybox library for smooth, professional popup experience
• Fully responsive design
• Works with all Joomla modules

Perfect for creating login popups, contact forms, newsletter signups, product details, image galleries, video players, and any content that benefits from modal presentation.

Downloading the Extension

After you purchase the extension from the store, you will receive an email containing download links for both components:

• Plugin: plg_content_popanymodule.zip
• Module: mod_popanymodule.zip

Alternatively, you can download the extensions from the "Downloads" section in the store.

Installing the Plugin

To install the Content Plugin:

1. Log in to the backend of your Joomla website
2. Navigate to System > Install > Extensions
3. Drag and drop or browse for plg_content_popanymodule.zip
4. Click Install

Installing the Module

To install the Module:

1. Navigate to System > Install > Extensions
2. Drag and drop or browse for mod_popanymodule.zip
3. Click Install

After Installation

Both components are automatically enabled after installation:

• Plugin: Go to Extensions > Plugins > Content - Pop Any Module to configure default settings
• Module: Go to Content > Site Modules and create a new "Pop Any Module" module instance
• Start using shortcodes in articles or place modules in module positions

Basic Shortcode Syntax

The Content Plugin uses a simple shortcode syntax to display modules in popups:

{popanymodule id="1"}
Click here to open module
{/popanymodule}

Shortcode Structure

• {popanymodule} - Opening tag for popup container
• id="X" - Module ID to display (required)
• Content - Clickable trigger element (text, HTML, image, etc.)
• {/popanymodule} - Closing tag

Available Attributes

• id - Module ID to display in popup (required, default: 1)
• width - Popup width in pixels (default: 400)
• height - Popup height in pixels (default: 400)
• class - Additional CSS class for the trigger link
• style - Inline CSS styles for the trigger link

Basic Examples

{popanymodule id="5"}
Open Login Form
{/popanymodule}

{popanymodule id="10" width="600" height="500"}
<button>View Product Details</button>
{/popanymodule}

{popanymodule id="15" class="btn btn-primary"}
<img src="/images/contact.jpg" alt="Contact Us">
{/popanymodule}

Where to Use

You can use shortcodes in:

• Articles: Add shortcodes directly in article content
• Custom HTML Modules: Use in module content
• Category Descriptions: Add in category descriptions
• Menu Items: Use in menu item descriptions
• Any Content Area: Anywhere that supports HTML content

Creating a Pop Any Module Instance

The Module component allows you to display modules in popups using Joomla's module system:

1. Go to Content > Site Modules
2. Click New
3. Select Pop Any Module from the module type list
4. Configure the module settings
5. Assign to a module position
6. Publish the module

Module Configuration

Key settings available in the module:

• Select a Module: Choose which module to display in the popup
• Trigger Element: HTML code for the clickable element (button, link, image, etc.)
• Trigger Element Class: Additional CSS class for the trigger
• Popup Box Width: Width in pixels (default: 500)
• Popup Box Height: Height in pixels (default: 300)
• Animation Settings: Opening/closing effects and speeds
• Overlay Opacity: Background overlay transparency
• Additional CSS: Custom CSS for styling

Trigger Element Examples

<button class="btn btn-primary">Open Module</button>

<a href="#" class="popup-link">Click Here</a>

<img src="/images/popup-trigger.jpg" alt="Open">

<div class="custom-trigger">
  <span>Open Popup</span>
</div>

Module Positions

Assign the module to any available module position in your template. The trigger element will appear at that position, and clicking it will open the selected module in a popup.

Opening Effects

Choose how the popup appears when opened:

• None: Instant appearance without animation
• Fade: Smooth fade-in effect
• Elastic: Bouncy elastic animation effect

Closing Effects

Choose how the popup disappears when closed:

• None: Instant disappearance
• Fade: Smooth fade-out effect
• Elastic: Bouncy elastic animation effect

Animation Speed Modes

Two modes available for controlling animation speed:

Auto Mode

Predefined speed options:

• Slow: Slower, more noticeable animation
• Normal: Standard animation speed
• Fast: Quick, snappy animation

User-Defined Mode

Set custom speed in milliseconds:

• Enter numeric value (e.g., 500, 1000, 2000)
• Lower values = faster animation
• Higher values = slower animation
• Example: 500ms = fast, 2000ms = slow

Overlay Opacity

Control the transparency of the background overlay:

• Value range: 0.0 to 1.0
• 0.0 = completely transparent (invisible)
• 1.0 = completely opaque (solid)
• Default: 0.3 (30% opacity)
• Recommended: 0.3 to 0.7 for good visibility

Combining Effects

You can combine different opening and closing effects:

• Fade in + Fade out = Smooth transitions
• Elastic in + Fade out = Bouncy entrance, smooth exit
• None + None = Instant appearance/disappearance

Configuring the Plugin

Navigate to Extensions > Plugins > Content - Pop Any Module to configure default settings that apply to all shortcode instances.

Available Settings

• Opening Effect: Default animation when popup opens (None, Fade, Elastic)
• Closing Effect: Default animation when popup closes (None, Fade, Elastic)
• Animation Speed Mode: Choose between Auto (Slow/Normal/Fast) or User-defined (milliseconds)
• Opening Speed: Speed setting based on selected mode
  • Auto mode: Slow, Normal, or Fast
  • User-defined mode: Milliseconds (e.g., 1000)
• Closing Speed: Speed setting based on selected mode
  • Auto mode: Slow, Normal, or Fast
  • User-defined mode: Milliseconds (e.g., 1000)
• Opacity of Popup Box: Overlay background opacity (0.0 to 1.0, default: 0.3)

How Settings Work

Plugin settings serve as defaults for all shortcode instances. These settings can be overridden in individual shortcodes if needed (though the current version applies settings globally).

Best Practices

• Set your preferred default animation effects
• Choose appropriate speed for your site's style
• Adjust overlay opacity for good contrast
• Test settings on different devices
• Consider user experience when choosing speeds

General Settings

Configure the module behavior and appearance:

• Select a Module: Dropdown list of all available site modules. Choose which module to display in the popup.
• Trigger Element: HTML editor for creating the clickable element. Can include buttons, links, images, or any HTML.
• Trigger Element Class: Additional CSS class(es) to add to the trigger link for custom styling.
• Popup Box Width: Width of the popup window in pixels (default: 500).
• Popup Box Height: Height of the popup window in pixels (default: 300).

Animation Settings

Same animation options as the plugin:

• Opening Effect: None, Fade, or Elastic
• Closing Effect: None, Fade, or Elastic
• Animation Speed Mode: Auto or User-defined
• Opening Speed: Speed based on selected mode
• Closing Speed: Speed based on selected mode
• Opacity of Popup Box: Overlay opacity (0.0 to 1.0)

Advanced Settings

• Additional CSS: Add custom CSS rules for styling the popup, trigger element, or overlay. Useful for custom designs and branding.

Module Assignment

After configuration:

1. Go to Module tab
2. Select Module Position where trigger should appear
3. Set Menu Assignment (All pages, Selected pages, etc.)
4. Set Status to Published
5. Click Save

Finding Module IDs

To use modules in popups, you need their module IDs:

1. Go to Content > Site Modules
2. Find your module in the list
3. The ID is shown in the first column
4. Alternatively, click on the module to edit it - the ID appears in the URL

Multiple Popups on One Page

You can have multiple popups on the same page:

{popanymodule id="5"}
Open Login
{/popanymodule}

{popanymodule id="10"}
Open Contact Form
{/popanymodule}

{popanymodule id="15"}
View Gallery
{/popanymodule}

Custom Styling

Add custom CSS classes and styles:

{popanymodule id="5" class="btn btn-lg btn-primary" style="margin: 20px;"}
Custom Styled Button
{/popanymodule}

Or use the module's "Additional CSS" field:

.pop-any-module {
  background: #ff5733;
  color: white;
  padding: 15px 30px;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
}

Responsive Popups

For responsive designs, use percentage-based widths or max-width:

• Set width to a percentage (e.g., width="80")
• Use CSS max-width in Additional CSS field
• Popup automatically adjusts on mobile devices

Common Use Cases

• Login Forms: Display login module in popup
• Contact Forms: Quick contact without leaving page
• Newsletter Signup: Subscribe forms in popups
• Product Details: Additional product information
• Image Galleries: Display gallery modules
• Video Players: Embed video modules
• Custom HTML: Any custom content modules
• Menu Modules: Navigation in popups

Popup Not Appearing

• Check Plugin Status: Ensure "Content - Pop Any Module" plugin is enabled
• Verify Module ID: Confirm the module ID exists and is correct
• Check Module Status: Ensure the target module is published
• JavaScript Errors: Check browser console for JavaScript errors
• jQuery Dependency: Ensure jQuery is loaded (required for Fancybox)
• Cache Issues: Clear Joomla cache and browser cache

Popup Appears But Content Missing

• Module Permissions: Check if user has permission to view the module
• Module Assignment: Verify module is assigned to current menu item/page
• Module Content: Ensure module has content configured
• Module Position: Check if module position exists in template

Styling Issues

• CSS Conflicts: Check for CSS conflicts with template
• Z-Index Issues: Popup may be behind other elements - adjust z-index in Additional CSS
• Width/Height: Verify width and height values are numeric (pixels)
• Responsive Issues: Use max-width CSS for mobile compatibility

Animation Not Working

• Check Settings: Verify animation effects are set correctly
• Speed Settings: Ensure speed mode matches speed values
• JavaScript Errors: Check browser console
• jQuery Version: Ensure compatible jQuery version

Common Errors

• "Module not found": Invalid module ID - verify ID exists
• "Popup doesn't close": Check for JavaScript errors, verify Fancybox loaded
• "Overlay too dark/light": Adjust overlay opacity setting
• "Popup too small/large": Adjust width and height parameters

Browser Compatibility

Pop Any Module works with:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Internet Explorer 11+

• What's the difference between the Plugin and Module?

  • The Plugin allows you to use shortcodes in articles/content to trigger popups. The Module is a standalone module that can be placed in module positions.

• Can I use both Plugin and Module together?

  • Yes, you can use both components simultaneously. They work independently and don't conflict.

• How do I find a module's ID?

  • Go to Content > Site Modules and look at the ID column, or click on the module to edit it - the ID appears in the URL.

• Can I display multiple modules in one popup?

  • No, each popup displays one module. However, you can create a Custom HTML module that contains multiple modules or content.

• Can I customize the popup appearance?

  • Yes, use the "Additional CSS" field in module settings or add custom CSS classes to plugin shortcodes.

• Do popups work on mobile devices?

  • Yes, popups are fully responsive and work on all devices. Use appropriate width/height settings for mobile.

• Can I use images as triggers?

  • Yes, you can use any HTML as trigger content, including images, buttons, links, or custom HTML.

• What happens if the module ID doesn't exist?

  • The popup will still appear but will be empty. Always verify module IDs before publishing.

• Can I change popup size dynamically?

  • Popup size is set via width/height parameters. For responsive designs, use CSS max-width.

• Is jQuery required?

  • Yes, Pop Any Module uses jQuery and Fancybox library. Most Joomla templates include jQuery by default.

• Can I use this with third-party modules?

  • Yes, Pop Any Module works with any Joomla module, including third-party extensions.

• How do I close the popup?

  • Users can close popups by clicking the X button, clicking outside the popup (on overlay), or pressing the ESC key.

• Can I disable the overlay?

  • The overlay is part of Fancybox functionality. You can make it more transparent by setting opacity to 0.1, but it cannot be completely removed.

• Do I need both components installed?

  • No, you can install only the Plugin or only the Module, depending on your needs. Install both if you want maximum flexibility.

Example 1: Login Popup

Display login module in a popup:

{popanymodule id="5" width="400" height="350"}
<button class="btn btn-primary">Login</button>
{/popanymodule}

Example 2: Contact Form Popup

Show contact form module:

{popanymodule id="10" width="600" height="500"}
<a href="#" class="contact-link">Contact Us</a>
{/popanymodule}

Example 3: Image Gallery Popup

Display gallery module:

{popanymodule id="15" width="900" height="700"}
<img src="/images/view-gallery.jpg" alt="View Gallery">
{/popanymodule}

Example 4: Newsletter Signup

Module configuration example:

• Select a Module: Newsletter Module (ID: 20)
• Trigger Element: Use the HTML editor and enter:

<button class="btn btn-success">Subscribe to Newsletter</button>

• Width: 500
• Height: 400
• Opening Effect: Fade
• Closing Effect: Fade

Example 5: Product Details Popup

{popanymodule id="25" width="800" height="600" class="product-popup-trigger"}
<div class="product-info">
  <h3>View Details</h3>
  <p>Click to see full product information</p>
</div>
{/popanymodule}

Example 6: Custom Styled Trigger

Using module with custom CSS:

/* Additional CSS */
.pop-any-module {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 15px 30px;
  border-radius: 25px;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
  transition: transform 0.3s;
}

.pop-any-module:hover {
  transform: scale(1.05);
}

Example 7: Multiple Triggers

Different triggers for same module:

{popanymodule id="30"}
<span class="icon-info"><i class="fa fa-info-circle"></i></span> More Info
{/popanymodule}

{popanymodule id="30"}
<button>Learn More</button>
{/popanymodule}