Love This Extension?

Your feedback matters! Help me improve by leaving a review on the Joomla Extension Directory.

JO Simple Modal

JO Simple Modal

JO Simple Modal is a powerful and flexible Joomla system plugin designed to automatically initialize modals for elements with a specified class. It provides a seamless way to enhance user interaction by displaying content in modal dialogs, making it easy to manage and customize modal behavior directly from the Joomla administrator panel.

Key Features:

Customizable Modal Trigger Class: Define a CSS class to trigger modals, allowing for flexible integration with existing content.
Show/Hide Modal Title: Enable or disable the display of the modal title based on your preference.
Theme Switcher (Dark/Light): Choose between light and dark themes to match your website's design.
Custom CSS: Add custom CSS to style the modal popup according to your needs.
Restrict Modal Functionality to Specific Menu IDs: Limit the modal functionality to specific menu items, enhancing control over where modals appear.
Modal Size Customization (Small, Medium, Large): Select from predefined sizes to fit different types of content.
Modal Position (Top, Center, Bottom): Position the modal at the top, center, or bottom of the screen for optimal visibility.
Animation Effects (Fade, Slide): Choose from fade or slide animations to enhance the user experience.
Preload Images: Preload images for faster display, improving the performance of image-based modals.
Support for Multiple Languages: Easily add support for multiple languages by including language files.

🚀 Pro Features:

  • Compatible with Joomla 3, 4 & 5
  • More features added to the plugin.
  • Companion Module added to unlock advanced features.

★★ Plugin Features:

  • Loading Method: Choose between AJAX or iframe to define how the modal should load its content.
  • Iframe Height: Set the height of the iframe.
  • Whitelist Domains: Enter a comma-separated list of domains allowed to load in the modal.
  • Separate Close Button: Show or hide the close button independently on the modal.
  • More Animation Effects: Select an animation effect for the modal from these options: Fade, Zoom, Slide From Top, Slide From Bottom, Slide From Left, and Slide From Right.
  • Animation Speed: Set the duration of the animations (e.g., 0.3s, 500ms).
  • <p> and <div> elements with class "josmodal" will also be converted to modals.

★★ Module Features:

  • Four Trigger Conditions: Control when the modal/notification appears.
    1. Page Load: Open immediately (with optional delay in milliseconds).
    2. Scroll-Based: Trigger at a specific scroll position (e.g., 90% down the page). Customize the scroll threshold (0.1 = top, 1 = bottom).
    3. Element Visibility: Open when specific elements (IDs/classes) enter the viewport.
    4. User Idle: Detect inactivity (e.g., after 15 seconds) before showing the modal.
  • Frequency Control: Limit how often users see the modal/notification.
    1. Always: Show on every page load.
    2. Per Session: Show once until the browser/tab closes.
    3. First Visit Only: Only for new visitors (uses browser cache).
    4. First X Visits: Show for a set number of visits (e.g., 3 times).
  • Display Styles: Choose from 3 templates for different use cases.
    1. Modal: Inherits all plugin features with customizable title options (show/hide) and override capability.
    2. Notification Bar: Position the notification bar at the top or bottom, with customizable height, background color, close button, and fade/slide animations.
    3. Floating Box: Position the floating box in any corner combination (top/bottom + left/right), with styling options for padding, background color, height, and close button, plus fade or slide-in animations.
  • Dynamic Content Sources: Supports full HTML content or embedding other modules.
    1. HTML Editor: Rich text editor for custom content.
    2. Module Embedding: Display content from any published Joomla module, and even use the {loadmoduleid XX} syntax for precise manual placement.

 

Frontend Demo:

Open Image in Modal

Parallax Background

Click to open modal

Click

hello world

hello world

 

Code Example:

<p><a href="/images/parallax-background.jpg" class="josmodal" data-title="Sample Image" data-width="800px" data-height="600px">Open Image in Modal </a></p>

<p><img src="/images/parallax-background.jpg" alt="Parallax Background" width="344" height="229" class="josmodal" /></p>

<p><img src="/images/parallax-background.jpg" alt="Click to open modal" width="344" height="229" class="josmodal" data-src="/images/parallax-background.jpg" data-title="Large Image" data-width="800px" data-height="600px" /></p>

<p><a href="/extensions/modules/jo-super-section" class="josmodal">Click</a></p>

<p class="josmodal">hello world</p>

<div class="josmodal"><span style="text-align: center; display: block; font-size: larger; font-weight: bold;">hello world</span></div>

 

Backend Screenshot:

Download Free Get Pro

Our website requires some cookies to function properly. In addition, other cookies may be used with your consent to analyze site usage, improve the user experience.