Wednesday, October 22, 2008

Joomla! 1.5 Getting the modal dialog to work

Today I quickly want to show you how to get the Joomla! 1.5 Modal Dialog (SqueezeBox - Expandable Lightbox) to work in any of your components or modules. It's actually quite easy to do since the Joomla! team did such a great job at making mootools part of the solution. JHTML to the rescue! :)

In this example I'm going to make a normal anchor open up a Modal dialog. Are you ready?

Within your php code tags enter the following:

<?php
JHTML::_('behavior.modal', 'a.modal-button');
?>

Add an anchor and the following to the anchor:


<a href="http://www.google.com/" class="modal-button" rel="{handler: 'iframe', size: {x: 725, y: 520}}">MyMooModal</a>


And that is all there is to it. You can specify ANY link and it will open in the Modal Dialog