|
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.
- You still need to include this at the top of your template:
<?php JHTML::_( 'behavior.modal' ); ?>
- 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.
- 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!
|