What is the Module JT Popup Balloon

JT Popup Balloon Module is a simple module for Joomla! This module can displays any images or modules (Menu, Banner, Images, Custom HTML, ...) in popup ballon window on bottom-left or bottom-right corner of your browser window. When you scroll the browser window, the module is alway displayed. You can show, hide or close your popup with toolbar button. This module is suitable for display Ads, Banners, Menu, Button, Popup Warning, Custom code,...

JT Popup Balloon Module

JT Popup Balloon Module

JT Popup Balloon Module

JT Popup Balloon Module

Module JT Popup Balloon Features

  • Displays any images or modules (Menu, Banner, Images, Custom HTML, ...) in popup ballon.
  • Display Image Link, Module ID, Module Position.
  • Display popup on bottom-left or bottom-right.
  • Set width and Height.
  • Customize popup toolbar.
  • Transparent background.
  • Show/Hide/Close button.
  • Scrollable text link.
  • Auto minimize On/Off.
  • Set popup display time
  • Set popup speed.
  • Display popup only first time.
  • Top/Bottom Offset.
  • Left/Right Offset.
  • Fix display.
  • Create your own style for the popup
  • Support the most common browser with latest version
  • Compatible with Joomla! 3.x and 4.x

New features from previous version

  • Compatible with Joomla! 4.x
  • Optimize code and fixed bugs.
  • Fixed the popup not auto start on some website.
  • Fixed the module can not display because of a conflict with other extensions.

JT Popup Balloon Demo

JT Popup Balloon Live Demo

Download Module JT Popup Balloon

Download Module JT Popup Balloon

Module JT Popup Balloon Documentation

Install the module JT Popup Balloon

1. Install the module JT Popup Balloon via Joomla! Extensions -> Manage -> Install.

2. Goto Extensions -> Module and open the module JT Popup Balloon then Enable (Published) the module JT Popup Balloon on any available position of your template. We recommend you publish the module JT Popup Balloon on the position named Debug because it is located at the bottom of your web page.

Published JT Popup Balloon Module on Debug position

3. Select Menu Assignment for the module JT Popup Balloon to All Pages.

Select Menu Assignment for Module JT Popup Balloon

4. Save & Close.

5. Clear your Joomla! cache and your Browser cache.

6. Go to your site then refresh your browser. If you see the demo banners popup on your website, this module works well on your site. If not, please view Troubleshooting below.

Upgrade the module JT Popup Balloon Free to Pro

If you have installed the module JT Popup Balloon Free, you don't need to remove it, just install the module JT Popup Balloon Pro and open it then click Save to apply the Pro features. Your module will be upgraded to Pro and your old settings will be kept.

How to display your image in popup balloon

With the module JT Popup Balloon Pro, you can display your image link directly without creating any image module.

1. Go to Content -> Media then upload your image to joomla! image folder.

2. Open module JT Popup Balloon then change Popup width and Popup height to fit your image

Module JT Popup Balloon Window Size Settings

3/ Change default image to your image and setting the link for your image.

Module JT Popup Balloon Image Link Settings

4/ Setting your popup toolbar.

Module JT Popup Balloon Setting Toolbar

5/ Save & Close.

6/ Clear your Joomla! cache and your Browser cache then refresh your page. Now your image display on your website.

How to display your module in popup balloon

The module JT Popup Balloon Free version has limited features, please apply this option to display your image or module.

1. Open module JT Popup Balloon then change Display Option to Module Position.

Module JT Popup Balloon Display Module Position Settings

2. Remember the Module Position name is jt_popup

3. Save & Close the module JT Popup Balloon.

4. Open your module that you want to display in popup balloon (Images, Banners, Custom HTML,...), go to the Position field and enter (type by keyboard then press enter) jt_popup.

Module custom image published on the popup balloon

You can select a module position from the dropdown box of pre-defined positions or enter your own module position by typing in the name then press Enter

5. Save & Close your module.

6. Clear your Joomla! cache and your Browser cache then refresh your page. Now your image module displays on your website.

Now your image module displays on your website

How to use multiple modules on your website

You can copy or duplicate this module then publish them with different settings on different pages.

Please note that only one module works on the same page.

Videos Clip

Videos tutorial how to install and using module JT Popup Balloon

Videos tutorial how to upgrade module JT Popup Balloon Free to Pro

Troubleshooting

The module JT Popup Balloon not display on your website

1. Make sure the module JT Popup Balloon is published and select Menu Assignment for the module JT Popup Balloon to All Pages.

2. The position named debug is not enable on your template. You can go to your template option to enable it. Other ways, please try to publish the module JT Popup Balloon on other position.

Read more about How to enable debug position

The module JT Popup Balloon is displaying incorrectly on your website

Please enable Fix Display option in the module JT Popup Balloon. Other ways, you can try to publish the module JT Popup Balloon on other position or create a new position for your template.

Adding a new position for your template

1. Go to Extentions -> Templates -> templates -> Click on your template name

2. Click to open the file named index.php in left column.

  • Find
</body>
  • Before add
<jdoc:include type="modules" name="jt_popup_balloon" />
  • Your code looks like this
...
<jdoc:include type="modules" name="jt_popup_balloon" />
</body>
</html>

3. Publish the module JT Popup Balloon on the position named jt_popup_balloon

The module JT Popup Balloon not display correctly on Internet Explorer browser

1. Go to Extentions -> Templates -> templates -> Click on your template name

2. Click to open the file named index.php in left column.

  • Find:
<head>
  • Affter add:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  • Your code looks like this:
<head>
   ...
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <jdoc:include type="head" />
   ...
</head>

3. Click Save & Close