Get Started

Easy Popup v2.6 is distributed as a single system plugin ZIP for Joomla 4.x, 5.x, and 6.x.

After downloading plg_popup_v2.6.zip, go to Extensions > Extension Manager (or System > Install > Extensions), open the Upload Package File tab, choose the file, and click Upload & Install.

• Plugin file: plg_popup_v2.6.zip
• CLI install: php cli/joomla.php extension:install --path=/path/to/plg_popup_v2.6.zip

On success, enable System - Easy Popup under Extensions > Plugin Manager.

After installation go to Extensions > Plugin Manager. In the search bar type System - Easy Popup, then click the plugin name to open its settings. The default Plugin Settings tab opens first.

Set Status to Enabled and configure the other tabs. The default Modern (2026) theme is recommended for new sites; choose Classic (Legacy) under Styling Settings to keep the original Fancybox look.

Add {popup …} …your HTML… {/popup} shortcodes in articles, modules, or custom HTML. Assets load automatically only on pages that contain popup shortcodes. Use the Shortcode Examples tab to copy ready-to-use shortcodes.

In the plugin settings you control opening/closing effects, speeds, and overlay opacity. These are global settings for all popups unless overridden in a shortcode.

• Opening Effect: None, Fade, Zoom (Modern), Slide up, Slide down, or Elastic. Zoom and slide effects are optimised for the Modern theme.
• Closing Effect: None, Fade, Zoom (Modern), Slide up, Slide down, or Elastic.
• Fit To View: When ON, the popup resizes to fit inside the viewport on tablets and phones.
• Opening Speed: Duration in milliseconds (Modern defaults: 380 ms). Classic default is 1000 ms.
• Closing Speed: Duration in milliseconds (Modern defaults: 280 ms). Classic default is 1000 ms.
• Overlay Opacity: 0 to 1. Modern theme uses a blurred overlay; this controls the dark tint strength.
• Font Awesome: Set to Yes to load icons for triggers and overlays, or No if your template already loads Font Awesome.

Note: Per-popup dimensions are set with popwidth and popheight in each shortcode. Global animation settings apply to all popups on the site.

Popup styling is global for the whole site. Individual popups can still use custom dimensions and classes via shortcode attributes.

• Popup Theme: Modern (2026) — blur overlay, rounded panel, coordinated animations. Classic (Legacy) — original Fancybox look with pattern backgrounds and image close buttons.
• Background Color: Overlay dim colour using the colour picker (RGBA supported).
• Background Pattern Style: Classic theme only — choose from 10 predefined patterns, or None.
• Popup Background Color: Background colour inside the popup panel.
• Popup Text Color: Text colour inside the popup panel.
• Close Button Style: Classic theme only — choose from 10 predefined close button images.
• Font Awesome: Set to Yes if you use icons on triggers or image overlays and Font Awesome is not already loaded by your template.
• Extra CSS Styles: Add custom CSS rules for triggers or popups.

Modern-theme options (width, blur, accent colour, close button, ibtn styling) are in the Modern Popup Design tab.

The plugin includes a built-in Shortcode Examples tab in the plugin configuration with 20+ ready-to-use examples. Navigate to Extensions > Plugins > System - Easy Popup, open the tab, find the example you need, and click Copy.

Examples include:

• Simple text popups and pill button triggers (ibtn)
• Image popups with hover and always-visible overlays
• YouTube, Vimeo, and Google Maps iframe popups
• Modern and Classic animation effects
• Custom popup dimensions
• HTML content with floated images and {clearfix}
• Contact forms and rich HTML panels

After copying, paste the shortcode into any Joomla article, module, or custom HTML and adjust the values as needed.

Available when Popup Theme is set to Modern (2026) under Styling Settings.

• Default Popup Width / Max Height: e.g. 860px and 85vh. Used when shortcodes omit popwidth / popheight (depending on Width/Height Mode).
• Width / Height Mode: Control whether omitted shortcode sizes fall back to plugin defaults.
• Popup Viewport Margin: Space between the panel and the browser edge (pixels).
• Popup Corner Radius, Border Color, Content Padding: Panel appearance.
• Overlay Blur: Backdrop blur behind the popup (e.g. 10px).
• Accent Color: Links, focus rings, and highlight colour inside the popup.
• Close Button: Position (top-right / top-left), size, offsets, radius, background, icon, and border colours.
• Modern Button Styling: When ON, applies 2026 pill styling and gradient colours to ibtn trigger buttons.
• Image Trigger Corner Radius: Default rounded corners for image-based triggers.

Add {popup …} …content… {/popup} shortcodes in articles, modules, or components. You can popup text, images, iframes, and YouTube/Vimeo/Google Maps URLs from text links, pill buttons, or image triggers.

Place block-level shortcodes outside <p> tags when the popup body contains block elements to avoid inline content showing on the page.

General Options

Image & Overlay Options

Predefined Button Classes (ibtn)

Helper Shortcode

{clearfix} — clears floats after image triggers or floated content inside a popup.

Examples

Simple Text Popup

{popup text="Simple Text Popup" popwidth="500px" popheight="300px"} <img style="float:left;margin-right:5px;" src="/images/corporate/small/1.jpg"/>Lorem ipsum dolor sit amet.{clearfix}{/popup}

Icon + Text Popup

{popup text="Open details" icon="fa-plus" popwidth="720px" popheight="480px"}Your content here{clearfix}{/popup}

Image with Overlay

{popup image="images/photo.jpg" overlaytext="View Image" icon="fa-eye" overlaybgcolor="#000" overlaytextcolor="#fff" overlayopacity="0.8" imgwidth="320px" imgheight="240px"}Your content here{clearfix}{/popup}

YouTube Video Popup

{popup url="https://www.youtube.com/watch?v=VIDEO_ID" text="Watch Video" icon="fa-play" popwidth="853px" popheight="480px" autoplay="1"}{/popup}

Button Style Popup

{popup class="ibtn ibtn-yellow" icon="fa-comment" text="Click Me" popwidth="600px" popheight="300px"}Your content here{clearfix}{/popup}

Tip: For more examples, use the Shortcode Examples tab in plugin configuration.

Use the url attribute to open YouTube, Vimeo, Google Maps, or other iframe content in a popup instead of inline HTML.

Supported URL types

• YouTube — watch or embed URLs
• Vimeo — standard or player URLs
• Google Maps — maps.google.com links with coordinates or place queries

Examples

YouTube

{popup url="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" text="Watch Video" icon="fa-play" popwidth="853px" popheight="480px"}{/popup}

Vimeo

{popup url="https://player.vimeo.com/video/VIDEO_ID" text="Watch on Vimeo" popwidth="800px" popheight="450px"}{/popup}

Google Maps

{popup url="https://maps.google.com/maps?q=Eiffel+Tower,+Paris" text="View on map" popwidth="800px" popheight="500px"}{/popup}

Image trigger for video

{popup image="images/video-thumb.jpg" alt="Play video" url="https://www.youtube.com/watch?v=VIDEO_ID" overlaytext="Play" icon="fa-play" popwidth="800px" popheight="450px" autoplay="1"}{/popup}

How do I add Font Awesome icons to buttons and images?

Visit Font Awesome, pick an icon, and add it with icon="fa-comment", icon="fas fa-plus", icon="far fa-star", or icon="fab fa-facebook". Ensure Font Awesome is set to Yes in plugin settings unless your template already loads it.

How do I write shortcodes faster?

Use the built-in Shortcode Examples tab: Extensions > Plugins > System - Easy Popup, open the tab, click Copy, paste into your article or module, then customise values.

Why is popup content visible on the page?

Do not nest popup shortcodes inside <p> tags when the body contains block elements. Easy Popup stores content in a hidden #popinline div (legacy Fancybox pattern). Use block-level shortcodes and {clearfix} after floated images.

How do hover overlays work?

Add overlaytext to an image trigger. The overlay fades in on hover by default. Set overlay="true" to keep the badge always visible.

Modern vs Classic theme — which should I use?

Modern (2026) is recommended for new sites: blur overlay, rounded panel, zoom/slide animations, and updated ibtn styling. Classic keeps the legacy Fancybox look with pattern backgrounds and image close buttons.