Jeepstone

The home of Pete Jones

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.

Tags: , ,

This entry was posted on Friday, March 6th, 2009 at 11:31 am and is filed under Joomla. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

35 Responses to “Open content in a modal pop-up in Joomla”

  1. Weon Says:

    March 6th, 2009 at 12:33 pm

    Don’t know anything about Joomla but it looks like your links end up being a text-heavy.

    Would Lightbox2 be any better?

    http://www.huddletogether.com/projects/lightbox2/

  2. admin Says:

    March 6th, 2009 at 12:37 pm

    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

  3. Weon Says:

    March 6th, 2009 at 1:59 pm

    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!

  4. Weon Says:

    March 6th, 2009 at 2:00 pm

    Oh, it only works for image pop-ups too, not page links.

  5. admin Says:

    March 6th, 2009 at 2:32 pm

    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.

  6. Mike Says:

    April 13th, 2009 at 3:06 pm

    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

  7. admin Says:

    April 14th, 2009 at 8:25 am

    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?

  8. Mike Says:

    April 14th, 2009 at 6:50 pm

    i just want the contents of the content item without the main template

  9. Mike Says:

    April 14th, 2009 at 6:52 pm

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

  10. James Says:

    July 17th, 2009 at 5:40 am

    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

  11. admin Says:

    July 17th, 2009 at 8:05 am

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

  12. Nicholas Says:

    August 6th, 2009 at 7:30 pm

    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!

  13. Chris Says:

    October 11th, 2009 at 1:37 am

    JHTML::_(‘behavior.modal’); IS core modal functionality Nicholas!!!

  14. lee Says:

    November 25th, 2009 at 9:43 pm

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

  15. admin Says:

    November 26th, 2009 at 8:58 am

    If you have SEF enabled then you can just do it just the same. The key thing is to append tmpl=component to your link. Take a look at http://www.hastenswestend.co.uk/. In the bottom right there is an Autumn Offer. This uses exactly the same process.

  16. lee Says:

    November 26th, 2009 at 12:23 pm

    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.

  17. admin Says:

    November 27th, 2009 at 10:07 am

    hmmm I’m not sure you can do what you want to do with this process as you need to close the window. Have you tried looking at http://www.theartofjoomla.com/home/6-layouts/16-layout-overrides-popup-login-box.html?

  18. gsuis Says:

    January 21st, 2010 at 1:27 am

    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?

  19. admin Says:

    January 21st, 2010 at 9:00 am

    gsuis, Can you post a link to your problem page?

  20. Tolga Says:

    March 2nd, 2010 at 9:02 pm

    Hi,

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

    Thanks

  21. mayank Says:

    September 15th, 2010 at 1:14 pm

    i was use it but i wasn’t give a right path. So How To given a path please help me.

  22. Kimo Says:

    October 20th, 2010 at 11:26 pm

    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.

  23. meshi Says:

    May 3rd, 2011 at 4:15 pm

    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

  24. E Says:

    August 29th, 2011 at 1:50 pm

    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.

  25. Pete Says:

    August 30th, 2011 at 9:06 am

    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.

  26. E Says:

    August 30th, 2011 at 3:52 pm

    yes that’s what i meant. any guidance on how to do that?

  27. Pete Says:

    August 30th, 2011 at 4:11 pm

    Alter your template for component.php and in the header you need to add some javascript. As we’ve already got Mootools, you can use something like http://demos111.mootools.net/Fx.Scroll. Add a call to your scrolling function using the document.ready function http://demos111.mootools.net/DomReadyVS.Load

  28. Ataour Rahman Says:

    December 27th, 2011 at 3:53 am

    Click Here

    just i write above code in my joomla left menu bar but it does not work.
    Can you help me why i overcome this problem?

  29. Chintan Says:

    January 23rd, 2012 at 1:11 pm

    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?

  30. thlas Says:

    January 27th, 2012 at 10:38 pm

    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

  31. thlas Says:

    January 28th, 2012 at 4:02 pm

    months, even years i was looking for this answer and i found the answer today !!
    you have to change index by index2 in and it works !! GREAT !
    Many thanks to http://forum.joomla.fr/showthread.php?154113-Comment-afficher-du-contenu-dans-une-fen%C3%AAtre-modale-sans-le-template-Joomla!

  32. Adam Says:

    May 23rd, 2012 at 2:53 pm

    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?

  33. anoop Says:

    August 16th, 2012 at 1:18 pm

    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

  34. ahmad balavipour Says:

    April 9th, 2013 at 11:25 am

    Thanks alot about your article

  35. sarika Says:

    April 13th, 2013 at 8:03 am

    pop2

Leave a Reply

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

Jeepstone is proudly powered by WordPress 3.4.1 | Entries (RSS) | Comments (RSS).