Using Joomla’s modal box in any template

You see Joomla’s modal box used in the admin quite a bit. This code is already included in Joomla, so why not use it on the front end as well? It is actually pretty easy to achiev.

First Call the necessary CSS & Javascript in your head tag.
(add this to your template’s index.php)

<script type="text/javascript" src="<?php echo $this->baseurl;?>/media/system/js/modal.js"></script>
<link rel="stylesheet" href="<?php echo $this->baseurl;?>/media/system/css/modal.css" type="text/css"/>
<script type="text/javascript">
window.addEvent('domready', function() {
SqueezeBox.initialize({});
$$('a.modal-button').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
SqueezeBox.fromElement(el);
});
});
});
function jInsertEditorText( text, editor ) {
eval(editor+'_id.insertCode(text);');
} window.addEvent('domready', function() {
SqueezeBox.initialize({});
$$('a.modal').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
SqueezeBox.fromElement(el);
});
});
});
</script>

Just add the above to your template and in your URL, call the modal box using the class=”modal” and rel=”{handler: ‘iframe’, size: {x: 570, y: 200}}” then in your href add “&tmpl=component” like this: