Ventana modal con Joomla 3


Todos sabemos lo que es una ventana (en informática me refiero), desde chicos en las escuelas, nuestros padres, nuestros amigos y sus celulares, simple; es como aprender a caminar. Esa área visual, normalmente en forma rectangular (nos las encontramos de todos tipos y formas) con alguna interface de usuario que muestra una salida de datos solicitados, pero la modal agrega un concepto más. Alterna o permite alternar el foco a otras ventanas del sistema pero nunca a la que le da origen, a su padre.

Las vemos muchas veces en la web, en solicitudes de registros, formularios de encuestas o publicidad. En el siguiente artículo les voy a mostrar como insertarla en el nuevo Joomla 3. Lo mejor de todo es que utilizaremos sus mismas herramientas y hojas de estilo, no hay que sobrecargarlo con archivos de terceros. Esta nueva versión de Joomla incluye bootstrap, jquery, mootools y una serie de funciones para ventanas modales dentro de modal.js y modal.css. El mecanismo es bastante simple y para los que tengan experiencia de desarrollo en las versiones 2.5 notarán la similitud, solo que esta vez a mi modo de ver es más intuitiva.

Primer paso (Instalando archivos JavaScript y hojas de estilo necesarios)

Lo primero es agregar los ficheros JavaScript necesarios para el trabajo. Si nos encontramos en el backend este primer paso podemos saltarlo pues vienen todas integradas, ahora si estamos en el frontend o vista de usuario encontraremos que solo están algunas como jquery o bootstrap y es nuestro trabajo adicionar le librerías complementarias (que ya se encuentran en la distribución)

En el fichero de plantilla en el que necesitamos mostrar la ventana modal (layout, por defecto default.php) adicionamos lo siguiente:

 <link rel="stylesheet" href="/media/system/css/modal.css" type="text/css">
 <script src="/media/system/js/mootools-more.js" type="text/JavaScript"></script>
 <script src="/media/system/js/modal.js" type="text/JavaScript"></script>
 <script>
      window.addEvent('domready', function() {
        SqueezeBox.initialize({});
        SqueezeBox.assign($$('a.modal'), {
          parse: 'rel'
        });
      });
 </script>

Si se fijan bien, la hoja de estilo que establece la configuración visual de la ventana modal, los archivos JavaScript que ya se encuentran en la distribución, solo tenemos que volver a cargarlos. Por último inicializamos cuando esté completamente lista la página (DOMREADY) el objeto SqueezeBox y lo seteamos con valores por defecto. Estos pueden cambiar, solo basta con revisar la documentación de la librería, pero con esta configuración funciona perfectamente.

Segundo paso (Agregando botón o enlace que ejecutará la ventana modal)

La ventana modal solo se ejecutará cuando la necesitemos y esto es algo que debemos tener en cuenta, ¿cuándo la necesitamos? Normalmente con un botón o un hipervínculo podemos hacer el trabajo. A continuación yo coloqué un hipervínculo que haciendo uso de bootstrap cobrará la apariencia de un botón común y corriente y el evento onClick () será el disparador.

<a class="btn modal" onclick="SqueezeBox.fromElement(this, {handler:'iframe', size: {x: 600, y: 450}, url:'pagina_modal.php'})">Botón</a>

La clase “btn” le dice a bootstrap que le aplique una configuración de estilo previamente establecida, la clase “modal” le dice a Joomla que la ventana que inicializará a continuación del evento onclick() será modal. Lo siguiente es configuración necesaria para el SqueezeBox, donde utilizaremos un iframe con 600×450 de tamaño de ventana y el contenido de la misma será la salida del resultado que provea pagina_modal.php

Tercer paso (Creando el iframe)

El iframe que se va a utilizar debe ser creado en el mismo layout donde se encuentra el vínculo a la ventana modal. Al final agregamos lo siguiente.

  <div id="sbox-window" role="dialog" aria-hidden="true" 
  style="z-index: 65557; left: 515px; top: 218px; width: 600px; height: 450px;" class="shadow">
      <div id="sbox-content" style="opacity: 1;" class="sbox-content-iframe"></div>
      <a id="sbox-btn-close" href="#" role="button" aria-controls="sbox-window"></a>
  </div>

Todos estos atributos son necesarios para el correcto funcionamiento de la misma y tienen respaldo en las librerías agregadas en el primer paso. Fijarse bien sobre todo en los atributos left, top, width y height que establecen la posición en pantalla de la ventana modal.

Cuarto paso (pagina_modal.php)

Esta es la página destino, puede ser PHP, HTML, una URL externa como http://www.google.es, casi cualquier cosa. Ahora en el caso que sea un layout de nuestro mismo sistema en Joomla pues podemos establecerle un par de configuraciones que ayudan al trabajo.

  // Nadie podrá acceder al resultado de esta página sino viene desde la misma aplicación Joomla actual
  defined('_JEXEC') or die; 
  // Le dice a Joomla que es una página modal
  JHtml::_('behavior.modal'); 

Como ven es muy portable el mecanismo de uso, pueden ser usadas donde quiera que las necesitemos. Prestar mucha atención a las librerías JavaScript y la hoja de estilo que insertamos al principio, deben ser incluidas para el correcto funcionamiento de la misma. Siempre revisen si ya no fueron incluidas previamente por Joomla. Diviértanse, prueben y experimenten que solo de esa manera aprenden.

Latest posts by Leroy Ley (see all)