logo El diario de Pepe Molina (Caricatos)

yo

En muchas páginas encontramos este efecto que oscurece la pantalla del navegador y presenta algún contenido en primer plano, destacándolo.


Última caricatura

Andrés Iniesta: Futbolista español. En la actualidad juega en el Barcelona.

Andrés Iniesta

RSS de las imágenes: rss


La Cita

La felicidad en gente inteligente es de lo más raro

Ernest Hemingway, escritor estadounidense (1899-1961).


En esta zona están las páginas personales del autor.


Mis clientes ahora también son mis amigos (aunque les cobre).


En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..


En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


Puede contribuir a mantener esta página con su donativo.


botón pay-pal

Lightbox sin librerías

emoticón de Caricatos Publicado el día 28 de abril de 2014
id=134; categorías: Vicisitudes de un Webmaster, Globalización, Programación

En muchas páginas encontramos este efecto que oscurece la pantalla del navegador y presenta algún contenido en primer plano, destacándolo. Ya nos habíamos ocupado de este efecto en el artículo/proyecto "Pseudo-lightbox".

Nos hemos planteado actualizar el código, ya que nos habíamos preocupado de la compatibilidad de navegadores que hoy día podemos considerar obsoletos, y que no daban soporte a posicionamiento fijo, y que a la vez teníamos que discriminar a la hora de aplicar el estilo de opacidad.

La Teoría

Viendo el comportamiento de estas ventanas "tipo lightbox" podemos deducir que existe un elemento que cubre toda la pantalla y va incrementando su opacidad (sin llegar al 100% de esa opacidad) y encima de ese elemento aparece la ventana en cuestión, pero desde la transparencia absoluta, hasta la opacidad total.

Esa ventana suele cubrir un porcentaje menor de la pantalla, permitiendo ver parte del contenido de la página, y además debe poder cerrarse desde algún elemento activo de la misma ventana.

A partir de estos datos teóricos implementaremos nuestro efecto procurando simplificar nuestro código al máximo.

Ocultando la página

En principio tenemos que tener al final de la página un elemento con el color que nos interese para ocultar su contenido, que llamaremos "ocultador" (el nombre es del todo arbitrario). A continuación ponemos las lineas necesarias para crearlo:

	v = document.createElement("div");
	v.id = "ocultador";
	v.style.backgroundColor = "#aaaaaa";
	v.style.position = "fixed";
	v.style.top = "0";
	v.style.left = "0";
	v.style.width = "100%";
	v.style.height = "100%";
	v.style.opacity = "0";
	v.style.visibility = "hidden";
	document.body.appendChild(v);

Nótese que a pesar de ser un elemento transparente debido a su opacidad, debemos indicar que no sea visible, ya que de lo contrario dejarían de estar activos tanto los enlaces como cualquier otra zona caliente de la página.

Ahora consideraremos el tiempo que tardaremos en ocultar el contenido y el grado de opacidad que vayamos a aplicar (a gusto de consumidor). Y con esos datos fabricar nuestros métodos:

lapsus = 10;
max_opacidad = 90;
function opacador(x, id)	{
	tag(id).style.opacity = x / 100;
}

function opacar_fondo()	{
	tag("ocultador").style.visibility = "visible";
	for (i = 0; i <= max_opacidad; i++)
		setTimeout("opacador(" + i + ", 'ocultador')", i * lapsus);
}

function mostrar_fondo()	{
	for (i = 0; i <= max_opacidad; i++)
		setTimeout("opacador(" + (max_opacidad - i) + ", 'ocultador')", i * lapsus);
	setTimeout("tag('ocultador').style.visibility = 'hidden'", max_opacidad * lapsus);
}

Antes de continuar dejaremos un elemento activo (nuestro icono) para aplicar el efecto durante 5 segundos Activar opacidad.

Una ventana ejemplar

Las ventanas podemos crearlas al inicio, o bajo demanda (evitando pérdida de tiempo de forma innecesaria), en tal caso deberíamos llevar un control de las ventanas que iremos creando, que podemos implementar con un simple objeto con los nombres de las ventanas y un valor que podemos llamar "creada". Como ejemplo veremos: "Las amigas de Caricatos".

Del código completo destacamos las líneas que creemos que pueden interesar:

ventanas = {
	amigas: {"creada": false}
};

function _amigas_()	{
	opacar_fondo();
	setTimeout(_amigar_, max_opacidad * lapsus)
}

function _amigar_()	{
	if (!ventanas.amigas.creada)	{
		v = document.createElement("div");
		v.id = "amigas";
		v.style.backgroundColor = "white";
		v.style.position = "fixed";
		v.style.border = "3px ridge blue";
		v.style.top = "10%";
		v.style.left = "10%";
		v.style.width = "80%";
		v.style.height = "80%";
		v.style.opacity = "0";
		v.style.visibility = "hidden";
		v.style.padding = "1em";
		v.style.textAlign = "center";

		/*
			En este punto se incluye el contenido
			de la ventana, visible en el
			código completo.
		*/

		document.body.appendChild(v);
		poner_evento(v, "click", _cerrar_amigas_);
		ventanas.amigas.creada = true;
	}
	abrir_ventana("amigas");
}

function _cerrar_amigas_()	{
	cerrar_ventana("amigas");
	setTimeout(mostrar_fondo, 100 * lapsus);
}

Solo nos queda mostrar el código que abre y cierra estas ventanas, muy parecido al código para cubrir la página con opacidad.

function abrir_ventana(cual)	{
	tag(cual).style.visibility = "visible";
	for (i = 0; i <= 100; i++)
		setTimeout("opacador(" + i + ", '" + cual + "')", i * lapsus);
}

function cerrar_ventana(cual)	{
	for (i = 0; i <= 100; i++)
		setTimeout("opacador(" + (100 - i) + ", '" + cual + "')", i * lapsus);
	setTimeout("tag('" + cual + "').style.visibility = 'hidden'", lapsus * 100);
}

Esperamos que sea de utilidad.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.134) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 2770 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

../diario.imagen.php?id=2&max=480
enlace a la postal
Copyright © 2002-2017 www.pepemolina.com
RSS rss | Ver Mapa del sitio