Bueno, no es una ventana emergente como tal, es más bien un simulacro pero que hace las veces de ventana emergente y sin peligro de que el navegador te bloquee dicha ventana. Es necesario tener conocimientos (por lo menos básicos) de:
Para el ejemplo de este artículo se va a utilizar imágenes transparentes con distintos niveles de opacidad, por lo cual es necesario que sepas utilizar un editor de imágenes (photoshop, firework, ...) para crear las imágenes transparentes a tu gusto. En caso de que no tengas un editor de imágenes, puedes utilizar las del ejemplo sin ningún problema.
Todo el artículo se basa en la explicación del ejemplo. El ejemplo fue probado en Internet Explorer versión 6 y 7, y en el Mozilla FireFox 2, y todos con resultados positivos.
Explicación del Ejemplo:
¡¡Por fin!! La parte buena de este artículo.
A muy grosso modo, el cuerpo principal (body) del archivo Html del ejemplo, está compuesto por 3 párrafos los cuales tienen la finalidad de llenar la página, logrando así que se vea cargada de información. Al final de cada párrafo hay un enlace el cual es el encargado de mostrar la ventana emergente a través de código hecho en JavaScript . Esta es la única diferencia significativa entre los 3 párrafos (el llamado a la función JavaScript). El código del primer párrafo es el siguiente:
<p>
Este es el contenido del primer párrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br>
Este es el contenido del primer párrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br>
Este es el contenido del primer párrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br>
Este es el contenido del primer párrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br>
<a href="javascript:abrirVentana('1');">Simulacro de ventana Emergente 1</a>
<p>
Una vez que hayas visto los 3 párrafos en el código del ejemplo, lo que verás a continuación son 4 capas (div) llamadas capaVentana, capaFondo1, capaFondo2 y capaFondo3. A estas capas le he aplicado código CSS y en principio todas están oculta. La capa capaVentana es la más compleja de todas y es porque en ella está el código de lo que he llamado "ventana emergente". El código es más sencillo de lo que parece:
Usé una tabla principal para maquetar una "ventanita de información" exacta a las del sistema operativo Windows XP, en donde a cada celda le asigné una imagen, y en la celda central, hice otra tabla donde coloqué el mensaje de la ventanita y el botón de Aceptar.
Las otras capas no tienen absolutamente nada. Más adelante veremos por qué.
Con esto finalizo lo que sería la explicación del cuerpo del Html. Antes de explicar los códigos que hice en JavaScript, es importante conocer la arquitectura de la página, es decir, la forma en que diagramé la página para lograr el efecto deseado:
Usuarios que han visto este tema también han visto...
- Expresiones Regulares en JavaScript
- Javascript para recomendar página
- Evitar el doble envío de un formulario con JavaScript
- Previsualizar una imagen antes de subirla en JavaScript
- Scroll de noticias con Javascript
- Versión imprimible de este documento
- Enviar por e-mail este documento
