Ventanas que no se comen los navegadores (2)

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/";

Usuarios que han visto este tema también han visto...

- Eventos del raton
- Escritura en una Capa en DHTML
- Objetos Tabs
- Ventanas que no se comen los navegadores
- Efectos de transición

- Versión imprimible de este documento

- Enviar por e-mail este documento