A Free Template From Joomlashack

A Free Template From Joomlashack

Load Mootools modal window immediately in Joomla

PDF Print E-mail
Written by Kirby   
Wednesday, 26 November 2008 18:52

Modal windows using Mootools are pretty useful. It's great to include AJAX effects and functionality easily within Joomla.

I was recently tasked with creating a popover form, but the catch was that it had to load automatically. A quick post to the Joomla forums didn't yield an immediate response (...not that the forums aren't great but I needed some advice very quickly. As I write, there's probably someone typing in better code than I have here...). AJAX isn't a strong point right now. I kind of wish I had a couple weeks (or months) to just tinker with AJAX so it's more familiar.

Anyway, I got some initial wisdom from the pages of Art of Joomla for how to include the usual modal windows using Mootools within Joomla. This was a start.

The difference though was how to get this stuff to load without a click event. Also, I needed a window that opened a real page.

  1. You still need to include this at the top of your template:
    <?php JHTML::_( 'behavior.modal' ); ?>
  2. Next, you still need to create a link that represents what URL you want, plus the rel attribute that gives the specs for the iframe.
    <a class="modal" rel="{handler: 'iframe', size: {x: 570, y: 500}}" id="modalWindowLink" href="http://www.kirbymixedmedia.com"></a>
    For this project we didn't want a visible link. I just didn't put in any text in between the link tags. I'm guessing you could set the css visibility if you think that's cleaner. I also gave the link a specific ID.
  3. Finally, this is the code block that gets it done.

    Just after the link, I put in this script block:

          <script>
    window.addEvent('domready', function() {
    window.addEvent('load', function(){
    //alert('clicked!');
    SqueezeBox.fromElement($('modalWindowLink'));
    });
    });
    </script>

    (commented line is just for debugging.)

Load your page, cross your fingers and watch the modal window pop up.

Clean up this code, tweak, improve - have fun!

 
Joomla 1.5 Templates by Joomlashack