How to Add a Joomla Popup with Modals

Are you interested in adding a Joomla Lightbox effect to certain items on your website? Well, now you can easily add a Joomla popup by using the Modals extension.

Why Use Joomla Modal?

Modal popup windows are fancy popups also known as Lightboxes. They can be used in a number of ways on your website. These popup effects can have a nice visual, if used properly, to highlight the right content.

Furthermore, if you use this extension correctly, you are able to create fancy Lightboxes of almost any style of material. This will keep your site visitors interested and help you gain traffic.

Let’s take a look at how to add a Joomla popup using the Modals extension.

Modals

Modals Joomla Extension

Modals is a very powerful, yet easy to use, plugin that allows you to create Joomla modal popups on different types of content throughout your website.

The Modals plugin extension lets you create a Joomla popup for whatever type of content you want. Once this extension has been installed and activated, you will have the ability to create popup effects for the following types of media:

  • Text
  • Articles
  • Internal Pages
  • External Pages
  • Images
  • Videos
  • Full Image Galleries
  • Slideshows 

The Joomla Modals plugin gives you full control over style and functionality. The plugin comes with an easy to use editor button that lets you insert the proper code wherever you need it.

Let’s take a look at how to install and configure the Modals popup effects plugin.

Install and Activate Modals

In order to use the Modals extension to create Joomla popups around your website, the extension first needs to be installed and activated. You can do this by downloading it off the extension homepage onto your computer.

Get Modals Joomla popup extension

Note: Clicking the download link shown above will take you to another page. As is the case with many Joomla plugins, there is a free version and a paid version. We are going to use the free version for this tutorial, so go ahead and click on that green download button to save the extension to your machine.

Click the green download button

Once you have downloaded the extension, drag and drop it into the file upload box located in your Joomla control panel area. It is very simple. Just click on the “Install Extensions” tab located on the left side menu.

Note: You can also browse for the file and upload it that way if you prefer. Joomla also gives options to install from a folder or from URL, but the process below is easiest.

Drag and drop joomla popup extrnsion into box

Once the extension has been installed, you will get a green box detailing the installation and letting you know it was successful.

Now that the extension has been installed, you have to activate it. On the top menu bar click on Extensions > Manage, on the top menu of your Joomla admin area.

Click on extensions then click on manage

You will see a list of your modules. Search for the “Modals” extension you just installed. If it has a red circle with a white “x” in it, click the icon to activate the plugin. If the icon has a green checkmark, it means it’s already activated and the extension is live on the site.

Plugin green check means it is activated

Activate Modals for Joomla Popup Boxes

Once you have activated the Modals plugin you will see there are two different areas you can configure: 

  • Button
  • System

To get to these configuration options click on Extensions > Plugins and search “Modals.”

Click extensions then click plugins to access joomla popup box configuration

Button

Click on the “Button – Regular Labs – Modals” link. You will simply be taken to the information and configuration page. Fill this out how you see fit and then go back.

Button configuration for Joomla popup box

System

Now click on the “System – Regular Labs – Modals” link. This will take you to the configuration and settings page for the Modals plugin.

Configure Modals for Joomla Popup Boxes

When you get to this page, you will see 7 main tabs. These include:

  • Plugin
  • Styling
  • Media
  • Auto-Convert
  • Editor Options
  • Tag Syntax
  • Advanced

Let’s go over these together.

Plugin

This tab shows you the plugin info and also what the simple syntax to make the Joomla popup run looks like.

Joomla popup box plugin

Styling

Create all the styling and dimensions for your Joomla lightboxes here. Have fun with it and play around with the different options.

Styling tab

Media

Set up the settings and options for your media images. Some options are in the pro version only, but the free version has options as well.

Media tab

Auto-Convert

Auto-Convert class names and links and other options in this tab.

Auto convert tab

Editor Button Options

Setup the options for your editor button through this tab.

Editor button options

Tag Syntax

Setup the modal tags and tag characters in this tab.

Joomla popup box tag syntax tab

Advanced

The Advanced tab is full of more advanced options for the Modals plugin. Go through these and fill them out how you see fit.

Advanced tab

That’s it! You have configured the plugin and you are ready to present Joomla popup boxes to your website visitors using the content and layout you have chosen.

Final Thoughts

Creating stylish popup effects on your Joomla website does not have to be difficult if you have the right extension. Using the Modals plugin, you will have the ability to easily create a popup box for any type of content you want.

Have you ever created a Joomla lightbox effect using the Modals plugin? Is there another method you prefer instead?

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.