Una ventana modal es el popup de la Web 2.0. Además de ser más usable y rápido, es más bonito. Joomla incorpora Mootools como framework Javascript en el core permitiendo crear popups en forma de ventana modal de una manera muy sencilla y homogénea. De hecho, cuando se programa en Joomla es recomendable usar todas las características del core Joomla para que todo quede con un «look» más consistente (Cómo usar el datepicker de Joomla).
Para poder usar los comportamientos que incorpora la librería Mootools en Joomla hay que incluir la siguiente línea de código en la primera línea del fichero index.php de tu template. Si estás desarrollando un componente, entonces añádela en el fichero view.html.php.
<?php JHTML::_( 'behavior.modal' ); ?>
Esta línea de código genera el include de la librería Mootools y la librería Squeezebox, encargada de generar la ventana modal. Es importante usar esta función PHP ya que de esta forma te aseguras que no se cargue varias veces repetida la librería por diferentes extensiones. Una vez incluidas las librerías basta añadir la clase modal a los enlaces que queremos que generen una ventana modal. Por ejemplo:
<a class="modal" href="images/stories/imagen_grande.jpg">
<mg src="images/stories/imagen_pequena.jpg" border="0" alt="Una imagen" />
</a>
Con el código introducido en este bloque se mostraría por pantalla la imagen pequeña, y al hacer click sobre ella aparecería una ventana modal con la imagen grande en alta resolución.
Se pueden añadir más opciones al enlace, por ejemplo:
<a class="modal" id="popup" rel="{handler: 'iframe', size: {x: 550, y: 450}}" href="https://www.nosolocodigo.com"> Popup con iframe a nosolocodigo.com </a>
Con el código introducido en el bloque de arriba se mostraría una ventana modal con un iframe que puede apuntar a cualquier sitio. En este caso está apuntando a la página principal de este Nosolocodigo, pero si estás desarrollando una aplicación podría apuntar a una vista raw, o una vista html con el parámetro tmpl=component. Vamos, que puede apuntar a donde sea. Las opciones se definen en el atributo rel del enlace, creo que no hace falta más explicación.
Esto está muy bien para lanzar las ventanas desde un enlace, haciendo click sobre él, pero ¿y si queremos lanzar las ventanas usando una función Javascript? Pues entonces sigue leyendo..
En caso de que lo que se quiera sea lanzar la ventana modal desde Javascript puedes usar la siguiente función:
<a class="modal" id="popup" rel="{handler: 'iframe', size: {x: 550, y: 450}}" href="https://www.nosolocodigo.com"></a>
<script>
window.addEvent('domready', function(){
window.addEvent('load', function(){
SqueezeBox.fromElement($('popup'));
});
});
</script>
Esta función se ejecutaría automáticamente en el evento load y provocaría que en el enlace con id popup se mostrará una ventana modal exactamente igual que si hiciéramos click sobre el enlace. Igual que se ha utilizado el evento load se podría usar cualquier otro evento.
Por último, si quieres lanzar una ventana modal instantáneamente sin haber definido previamente ningún enlace en el documento HTML, he implementado esta función que he encontrado por los foros de Joomla.org y que me funciona bastante bien. La función hay que definirla previamente para después usarla. Puedes crear un fichero Javascript y añadirlo al head del template usando el API de Joomla.
SqueezeBox.loadModal = function(modalUrl,handler,x,y) {
this.initialize();
var options = $merge(options || {}, Json.evaluate("{handler: '" + handler + "', size: {x: " + x +", y: " + y + "}}"));
this.setOptions(this.presets, options);
this.assignOptions();
this.setContent(handler,modalUrl);
};
Una vez añadida la definición del método loadModal, para usarlo, simplemente hay que llamarlo de la siguiente forma:
window.addEvent('domready', function() {
SqueezeBox.loadModal('https://www.nosolocodigo.com','iframe',650,450);
});
Como puedes ver, se puede dejar el template preparado para introducir popups tanto para imágenes como para enlaces externos/internos. Si además deseas programar extensiones en Joomla y quieres más, dispones de toda la potencia del framework Mootools para desarrollar tu aplicación.