Interesante efecto, ¿Como lo realizo?

Lord · #1 (**permalink**) 21/08/2007, 20:39

Saludos.

Encontré una pagina que al momento de hacer click en el link de "tell a friend", se abre un recuadro, al abrirse, el fondo se tonaliza en un color mas obscuro, el recuadro contiene un botón de cerrado para regresas al fondo.

Solo logre entender un poco del código css, según veo el recuadro no es un popup sino, un div que al momento de presionar el link mediante java se manipula, para mostrarlo con el comando "visibility" de CSS.

Espero que me expliquen.

La pagina es http://goincase.com y el link es "tell a friend" en la parte superior derecha de la pagina.

Gracias.

nevergame · #2 (**permalink**) 21/08/2007, 21:44

Es todo con css y javascript, incluso creo que sin javascript se puede hacer

el css tiene dos capas una dentro de otra la primera ocupa todo el cuerpo de la pagina
#fondo{
background-image:url(gris.png);
width:100%;
height:100%;
visibility:hidden;
}
#Mensaje{
width:200px;
height:200px;
background-color:#000000;
color:#FFFFFF;
visibility:hidden;
}//importante ke no se vea al cargar la pagina ninguna de las dos capas

el html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body><input type="button" name="Ocultar" value="Anular" onclick="CapaOcultar('Fondo');CapaOcultar('mensaje ');"/>
<input type="button" name="Mostrar" value="Anular" onclick="CapaMostrar('Fondo');CapaMostrar('mensaje ');"/>
<div id="fondo"><div id="mensaje">aki pone el form o lo que desees enviar</div></div>
</body>
</html>

el javascript

function CapaOcultar(capa){
mo = document.getElementById(capa) // este es nuestro objeto

mo.style.display = "none" // ocultamos

}

function CapaMostrar(capa){
mo = document.getElementById(capa) // este es nuestro objeto

mo.style.display = "" // mostramos

}

lucasan · #3 (**permalink**) 21/08/2007, 22:53

Wow, siempre ahbía querido saber como se hacia, y solo encontraba en páginas en ingñés, Gracias nevergame.

nevergame · #4 (**permalink**) 23/08/2007, 20:33

De nada siento si el codigo no se colorea no soy mu ducho en esto de forear.

Lord · #5 (**permalink**) 25/08/2007, 21:15

Perfecto, nevergame.

Habia visto anteriormente todo este rollo de las capas, pero no lo tenia claro.

Pero teno una duda, si deseo modificar el elmento (body), especificamente "la imagen de fondo" background, tendría que hacer esto:

Código:

	<script language="JavaScript" type="text/javascript">
		function CapaOcultar(capa)
		{
			mo = document.getElementById(capa) // este es nuestro objeto
			mo.style.display = "none" // ocultamos
			mo.style.background-image = "url('../imagen/fondo-de-la-imagen.png')"
		}
		function CapaMostrar(capa)
		{
			mo = document.getElementById(capa) // este es nuestro objeto
			mo.style.display = "" // mostramos
			mo.style.background-image = "url('../imagen/fondo-de-la-imagen-numero2.png')"
		}
	</script>

Sería un enlace, deberia de quedar así:

Código:

<a href="?accion=registrando&amp;" class="enlace" onclick="CapaMostrar('fondo');CapaMostrar('mensaje');CapaMostrar('body');">Registrate</a>

Css.

Código:

body	{/*Correcto*/
			background: #ffffff url("../imagen/fondo-de-la-imagen-original.jpg")  top left repeat-x;
			color: #888888;
			font-family: Calibri, Helvetica, Verdana, sans-serif;
			font-size: .8em;
			text-align: center;
			}

Según como yo veo, creo que estoy mal porque body no es un elemento creado como fondo o mensaje, es como un elemento algo asi como base.

Espero aclaren mis dudas, gracias.

derkenuke · #6 (**permalink**) 26/08/2007, 08:29

Hola Lord:

Lo que tenemos ahí es que a una función document.getElementById() les estamos pasando el String "body", y no hay ningún elemento que tenga por id "body" en el documento.

Pero el estándar dice que el elemento body puede tener un atributo id, así que sí podríamos llamarlo "cuerpo" y así hacer la llamada a la función

Código PHP:

  CapaMostrar('cuerpo');

Sin ningún problema.
Lo único no sé muy bien qué pasaría si le damos display = "none", técnicamente debería desaparecer todo el contenido de la página

Un saludo.

Fleiva · #7 (**permalink**) 27/08/2007, 02:42

Una preguntilla, el efecto "fade in" y "fade out" que suaviza la transición, cual es la parte del código que lo realiza?

Lord · #8 (**permalink**) 27/08/2007, 15:31

Cita:

Iniciado por Fleiva

el efecto "fade in" y "fade out" que suaviza la transición, cual es la parte del código que lo realiza?

Saludos Fleiva.

Como yo veo, el script mostrado por nevergame no realiza ese efecto, pero la pagina a la que me refiero si.
Lo que hace el script es modificar las propiedades css de la pagina.

En cuanto el efecto que no realiza, no hay problema para mi, aún así me agrada el resultado.

En este momento tengo un problema con las capas en IE, pero imagino que no debería consultarlo en esta sección del foro.

Saludos.

Shade · #9 (**permalink**) 28/08/2007, 01:33

Te recomiendo el panel de yahoo para ello http://developer.yahoo.com/yui/container/panel/ tiene la opcion de crearle un underlay al div que se crea, exactamente como tu dices.

Esta api permite muchisimas cosas ademas, como skinning del popup, resize, drag, etc etc...