Open content in a modal pop-up in Joomla

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 <head>

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:

<a href="index.php?option=com_content&view=article&id=31&Itemid=21">Link to a normal page</a>

change this to

<a href="index.php?option=com_content&id=31&tmpl=component&task=preview" class="modal">Link to a modal popup</a>

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.

<a href="index.php?option=com_content&id=31&tmpl=component&task=preview" class="modal" rel="{handler: 'iframe', size: {x: 680, y: 370}}" >Link to a modal popup with a dimension of 680px by 370px</a>

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.

38 thoughts on “Open content in a modal pop-up in Joomla

  1. How to you mean text heavy? As in the HTML attributes or just the actual link?

    The thing about using Joomla is that this is all core functionality which can be simply called. You could add Lightbox2 to the template and then use their implementation, but you’d be adding extra scripts to your site

  2. Sorry – I should’ve been clearer. I meant in terms of HTML attributes. Lightbox2 sorts all the resizing etc for you. It even picks up your alt text to use as an image caption.

    Like I say though, I know nothing about Joomla so it might be entirely unsuitable. Just thought I’d mention it.

    Also, everytime I check the feed for your site, I get the theme from The Bill in my head. Please post more so that I don’t see that post in the RSS feed any more!

  3. I will try to post more often. Sorry.

    That’s the one benefit of the Joomla method is that you can load HTML into it.

  4. I got this to work with loading a content item in the window but how to load the content without the template file. So just the item contents

  5. The pop-up opens using the component.php template so you can just modify this to include whatever you want. What do you want to achieve Mike?

  6. never mind i figured it out. I guess i needed the preview or to change as you said. Thanks

  7. What tells Joomla to even load modal when inserting the code above? Shouldn’t there be a JS file we should add? Or is Modal apart of Joomla 1.5?

    Thanks, James

  8. The JHTML::_(’behavior.modal’); (which gets put in your index.php) loads the javascript and the class=”modal” adds the javascript to the element.

  9. I’d definitely MUCH rather use Joomla! core functionality as opposed to bogging my site down with additional superfluous scripts. To me, the lighter and cleaner, the better.

    It’s been my experience that Joomla!’s core modal functionality is much stronger than any of the extensions I’ve tried in how it handles overlapping active-content and cross-browser compatibility. One of the more popular ones I tried even replaced Joomla’s version of Mootools with its own. That caused all kinds of problems.

    Obviously, you lack the extra functionality like having albums and what not, so it’s not necessarily for everyone.

    Thanks for a great article!

  10. how can i get this to work with SEF enabled and to just show the article without any of the surrounding template?

  11. Thanks – that makes sense. Do you also know how to make this work with community builder? I want to have the registration/login forms open in the popup but it just opens a page saying you need to be logged in – even though its just the registration page Im trying to open where you are obviously not ment to be logged in! I can get it to display the form ok if I dont append the tmpl=compenent bit but then it just shows my whole template in the pop up and also loads the logged in page within the popup as opposed to closing it and refreshing the page. Any help would be appreciated.

  12. i am using this modal pop-up window in my website. however, i’m having a bit of a problem…

    you see, i allow my users to sort (via javascript tiny script) a list, where the list details can be clicked and a pop-up window will show. BEFORE sorting, the pop-up window will appear with the right contents. but AFTER sorting, the pop-up window will still appear with an IE error.

    any idea why this happens?

  13. Hi,

    I want to popup a modal window right when you enter the site. Is that possible and how could I do it.

    Thanks

  14. In IE7 my popup is not being displayed in the center of the page. Rather, it is in the upper left corner of the browser window. I’m sure this is a simple CSS fix, but I’m not really clear what it would be. In Firefox it displays perfectly centered.

    Thanks in advance for any help.

  15. hi, this is cool but when i tried to use it, it’s not working in ie8. it is perfectly working in mozilla but not working in ie8. did i missed something? i just followed the instructions above

  16. Hi, great code, it was exactly what i needed, but please help, how do you make this code scroll down the iframe to the centre of the page? i’ve been trying a bunch of things i can’t sort it out.

  17. Do you mean scroll the content of the iframe to the middle? If so, you’ll probably need to put some javascript on the content loaded into the iframe that runs onload and set the scroll.

  18. Hi,
    I added the code for login and it opens in a Popup but After I login It opens the whole page in the pop up.I am Using Joomla 1.7. Could this be a reason?

  19. Hello,
    when I first open my popup, my table is correctly displayed (no menu, no template). But when I change the value of my listbox in the popup, the new page displayed is with the menus on the left (first time, there’s no menu). How can I do not to have the menu/template in the modal ?
    Thanks for you Help
    Thierry

  20. I had this basically working using fancybox2 (added js to head and necessary scripts) although modals may be better. I had the registration opening (actually in a module wrapper), and the problem is since it’s an iframe, the submit button opens the results in within the iframe. Any ideas how to modify the submit button to close the modal instead of loading the new page within?

  21. Hi ,

    Thanks for the document, and is very helpful.
    I have created the same in the joomla custom component. Now i have issue the modal popup is working fine in chrome , but not working in mozilla. please help me !. pls reply me .

    Thanks ,
    Advance

  22. hi. ive tried what youve instructed but when i click on the link, a modal popup appears with “an error occured”…. any solution???

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>