Popups DHTML – OpenPopups

01 de junio de 2006

Sistema Javascript para crear popups DHTML, por medio de capas, que no se pueden bloquear por los sistemas de bloqueo de popups.

Todos sabemos ya que la mayoría de los navegadores disponen de sistemas para bloquear los molestos popups, y cuando estos no los bloquean, existen barras de navegación, como la de Google, que también bloquea la presentación de popups. La mayoría de las veces, estos popups son muy molestos y tenemos que celebrar que ahora la mayoría se puedan detectar y no permitir su apertura, pero muchos de nuestros sitios utilizan este sistema para mostrar información legítima que nuestros visitantes deberían conocer.

En cualquier caso, existen métodos para mostrar popups que pueden resultar más complicados de bloquear, como los popups DHTML, que son una emulación de las ventanas secundarias, pero que funciona por capas y HTML dinámico para mostrar u ocultar su contenido. Este tipo de popups no se tienen en cuenta como ventanas secundarias, por lo que no se bloquean.

Tan sólo los navegadores que tengan deshabilitado Javascript dejarán de mostrar estos popups. Recordemos que Internet Explorer, depende de cómo esté configurado, a veces te muestra un mensaje de alerta cuando se intenta ejecutar un script en Javascript. El usuario es el responsable de permitir, o no, ejecutar scripts en la página. Por eso no es tan raro que incluso los popups DHTML se puedan bloquear, pero por lo menos significan un avance con respecto a las ventanas secundarias habituales.

OpenPopups

Todo lo anterior sirva para presentar un script Javascript Open Source (gratuito y de código libre) para crear Popups DHTML. Mecere la pena conocer este script, porque seguro puede resultar muy interesante para nuestras páginas web.

La web donde se puede descargar el sistema de popups DHTML es: http://www.openwebware.com/products/openpopups/

Desde dicha web se pueden descargar los archivos necesarios para la instalación del sistema de popups y algún código de ejemplo. De todos modos, lo explicaremos aquí en español, para que se pueda entender por todos.

Referencia: En DesarrolloWeb.com hemos publicado algunos otros artículos sobre cómo hacer un popup DHTML, pero utilizando la librería Cross-Browser. Pueden ser de interesante lectura para quien quiera profundizar en el tema o encontrar otras posibilidades para realizar popups DHTML. Está en nuestro manual de Taller de Cross-Browser DHTML.

Se tienen que descomprimir los archivos que se descargan desde la web, manteniendo la misma estructura de directorios.

Una vez están descomprimidos, en un directorio dentro de nuestro sitio web, que llamaremos por ejemplo "d_openpopups", ya podemos accederlos desde cualquier página para mostrar popups DHTML. Para ello, lo primero es incluir el Javascript con la librería.

Donde "d_openpopups" debe ser el directorio donde hemos descomprimido los archivos. Tal como está escrita la ruta hacia el script, se supone que hemos puesto este directorio en la raíz del directorio de publicación de la web.

Luego, tenemos que añadir un evento onload en la etiqueta <body>, para ocultar los popups al cargar la página.

La función hideDiv() recibe el número de popups que vamos a utilizar en la página. Si tenemos un solo popup DHTML llamaremos pasando un 1 como parámetro: hideDiv(1). Si tenemos 5 popups DHTML, le pasaremos un 5 como parámetro: hideDiv(5).

A continuación, tenemos que crear las capas con el código fuente de los popups a mostrar. Algo como:

<div id="Div1">
Código del Popup
</div>

Hay que fijarse que la capa tiene como identificador (atributo id) "Div1". Eso es para el popup 1. Si tuviéramos otros popups, deberíamos darles nombres con números consecutivos: Div2, Div3

Para acabar, tenemos que hacer la llamada a la función Javascript que debe mostrar el popup. Esa función se llama createWindow() y recibe varios parámetros:

Título de la ventana
Ancho de la ventana (el alto será el necesario para que quepa todo el contenido)
Color de fondo de la ventana
El identificador de la capa (sólo el numero, 1, 2, 3)
Si queremso que se muestre el icono para minimizar (1 para mostrarlo y 0 si no queremos que se muestre)
La posición "left" de la ventana (el número de píseles a la izquierda de la ventana)
La posición "top" de la ventana (el número de pixels que debe haber arriba de la ventana.

Por ejemplo, una llamada posible a esta función sería:

createWindow('Título', 300, '#ffff88', 1, 0, 100, 25);

Un detalle que a nosotros nos ha hecho falta cambiar para que todo funcionase correctamente, aunque no he visto explicado nada de esto en la documentación del producto, son los directorios de las imágenes y las declaraciones de estilos que utilizan los popups DHTML. Esos directorios vienen especificados en el archivo de scripts javascript llamado openpopups.js.

En las siguientes líneas del código se especifican los directorios de las imágenes y los CSS:

// CSS Diretory
cssDir = "/d_styles/";

// Images Directory
imageDir = "images/";

En principio, según entiendo, no habría por qué tocar esas líneas, porque no he modificado la estructura de directorios del archivo de descarga, pero si no las toco los ejemplos no funcionan correctamente. Para que las rutas se encuentren, he tenido que colocar la estructura de directorios desde la raíz del dominio hasta las carpetas donde están los archivos CSS y las imágenes. Sería algo como esto:

// CSS Diretory
cssDir = "/d_openpopups/openpopups/styles/";

// Images Directory
imageDir = "/d_openpopups/openpopups/images/";

Código completo

Vamos a mostrar el código de una página que tiene dos popups DHTML y con un par de métodos de carga de los popups, uno por medio de un botón y otro por medio de un enlace.

<html>
<head>
    <title>Ejemplo OpenPopups</title>
    <script language="JavaScript" type="text/javascript" src="/d_openpopups/openpopups/openpopups.js">
    </script>
</head>
<body onLoad="hideDiv(2);">
Esta página muestra un par de popups DHTML.
<br>
<br>
Esperamos que sean interesantes.
<form>
    <input type="button" value="Abrir Popup DHTML 1" onClick="createWindow('Ejemplo 1', 150, '#ffff88', 1, 1, 20, 40);">
</form>
<p>
Ahora veamos el ejemplo 2, apertura con un enlace:
<a href="#" onClick="createWindow('Anuncio MercadoProfesional.com', 468, '#EEEEEE', 2, 0, 240, 165);">Abre el segundo popup</a>

<div id="Div1">
    <div style="border: 1px solid #ff8800; background-color: #FFFF88; padding: 5px;">
    <b>Aquí pondríamos colocar tanto texto como queramos! Y todo tipo de contenido HTML!
    </div>
    <ul>
    <li>Con listas</li>
    <li>Enlaces</li>
    <li>Tablas</li>
    <li>...</li>
    </ul>
</div>

<div id="Div2">
    <div align="center"><a href="http://www.mercadoprofesional.com" target="_blank"><img src="mp468.gif" width="468" height="60" border="0" alt="MercadoProfesional.com"></a></div>
</div>

</body>
</html>

Se puede ver el ejemplo en marcha en una página aparte.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Follow {{ $author->twitter }}

Manual

Control de ventanas secundarias, popups, con Javascript

Submenú en otra ventana