Open content in a modal pop-up in Joomla

Pete — Fri, 06 Mar 2009 11:31:22 +0000

Have you ever wondered how to open an image or a Joomla page in a modal popup (one of those where the page background dims and a new page loads in front)?

To open a modal popup, you need to firstly ensure that you have the right bit of javascript loaded in the page. To do this, open your template and place the following line in the

JHTML::_('behavior.modal');

This loads the Joomla code that shows the popup.

Next you need to write the link to open the content. You can do this either as a Joomla content item or just an image. Let’s do the content item first.

Open your content article and find the link you want to open in a popup:

Link to a normal page

change this to

Link to a modal popup

Notice we have a class added to the link called ‘modal’. This means that Joomla will find any link with that class and open it as a modal pop-up. We can take this one step further and specify the size of the popup.

Link to a modal popup with a dimension of 680px by 370px

If you want to modify the template for the popup, look in your templates folder for the component.php file. This is the file we are targeting by using the tmpl=component. You can then adjust this file to suit.

If you want to open an image simply replace the href=”" with the path to the full size image.

Jeepstone » pop-up

Open content in a modal pop-up in Joomla