Website Building » Joomla » How do I add a pop up in Joomla?

How do I add a pop up in Joomla?

Last updated on December 26, 2022 @ 12:13 pm

Adding a pop up in Joomla is a fairly simple process. There are a few different ways to do it, but the most common way is to create a custom module. To do this, you first need to create a new file called popup.xml.

This file will contain the details of your popup. In this example, we will create a simple pop up that displays the current time.

To create the file, first open Joomla in your web browser. Then click on the extensions icon in the toolbar at the top of the screen.

This will open the extensions manager. In the extensions manager, click on the Upload New File button.

Click on the Choose File button and select the popup.xml file that you created in the previous step.

Joomla will now open the file in a text editor.

To create the popup, first enter the following code into the popup.xml file:

<extension type="module" version="3.7.0">
<name>Popup</name>
<author>Your Name</author>
<creationDate>Today's Date</creationDate>
<copyright>Copyright information</copyright>
<license>License information</license>
<authorEmail>your@email.com</authorEmail>
<authorUrl>Your website</authorUrl>
<version>1.0.0</version>
<description>A simple pop up that displays the current time</description>
<files>
<filename module="mod_popup">mod_popup.php</filename>
<folder>tmpl</folder>
</files>
</extension>

Next, create a new PHP file called mod_popup.php and add the following code:

<?php
defined('_JEXEC') or die;

class ModPopupHelper
{
public static function getTime()
{
return date('H:i:s');
}
}

Now, create a new folder called tmpl and add a new file called default.php inside it. This file will contain the HTML and JavaScript for your pop up.

To create the pop up, add the following code to the default.php file:

<div id="popup">
<p>The current time is: <?php echo ModPopupHelper::getTime(); ?></p>
</div>

<script>
window.onload = function() {
var popup = document.getElementById('popup');
popup.style.display = 'block';
}
</script>

Finally, go back to the extensions manager and click on the Install button to install the module. You should now see the pop up displayed on your website.

That’s it! You have successfully added a pop up to your Joomla website. You can customize the pop up by changing the HTML and JavaScript in the default.php file, or by adding additional options to the popup.xml file.

PRO TIP: Adding a pop up to your Joomla site can be done using a number of different methods, but it is important to be aware that doing so can adversely affect your site’s performance and may even result in your site being banned from search engines. Pop ups are generally considered to be intrusive and annoying by both users and search engines, so it is important to use them sparingly and only when absolutely necessary. When in doubt, consult with a Joomla expert before adding any pop ups to your site.
Madison Geldart

Madison Geldart

Cloud infrastructure engineer and tech mess solver.