Cómo crear esto?

designermaster · #1 (**permalink**) 07/02/2010, 13:02

Hola amigos, quisiera saber cómo crear lo siguiente:

Introducir un contenido dentro de una capa (div), y qué el user tenga la opción de clickar en una x POR ejempleo y cerrar este div, sabeis algún código o tutoriales?

Saludos y gracias!

mhax · #2 (**permalink**) 07/02/2010, 13:38

pues segun lo que entiendo lo que quieres es tener algo asi:

Código HTML:

Ver original<div id="todo">  
   <div id="cerrar" onclick="OcultarDiv()">Cerrar</div>
</div>

y el la funcion OcultarDiv() escondes el div todo.
Esa seria una solucion.
Si te sirve comenta.

Saludos.

designermaster · #3 (**permalink**) 07/02/2010, 13:50

y qué función le doy a ocultarDIV?

Gracias

cristian_cena · #4 (**permalink**) 07/02/2010, 15:18

Hola designermaster, he creado hace poco lo que me parece andas buscando, nada más copia el código y fíjate si te sirve.

Código:

<!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=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
	body{
		font-family:Arial;
		font-size:1em;
		color:#666666;
		background-color:#000000;
	}
	#din{ 
	-moz-border-radius:1em;
	padding:1em;
	width:370px;
	color:#666666;
	}
	#cerrar a{
		position:relative;
		top:-7px;
		width:20px;
		float:right;
		text-align:right;
		display:block;
		text-decoration:none;
		color:#000000;
		font-weight:bold;
		font-size:1.5em;
	}
	#cerrar a:hover{
		font-weight:bold;
		color:#666666;
		font-size:1.5em;
	}
	#abrir a{
		position:absolute;
		top:1em;
		right:1em;
		margin-left:1em;
		text-decoration:none;
		font-weight:bold;
		-moz-border-radius:0.2em;
		font-size:1.5em;
		background-color:#FFCC00;
		color:#000000;
	}
	#abrir a:hover{
	color:#666666;	
	}
</style>
</head>

<script language="JavaScript">
/* proximo paso: 
 pasar a funciones externas los scripts envevidos en las etiquetas html*/
</script>

<body>
	<div id="din"
	onMouseOver = "this.style.backgroundColor = '#FFCC00';"
	onMouseOut = "this.style.backgroundColor = '#000000';">
		
		<span id="cerrar"><a href="#" onclick="getElementById('din').style.display = 'none';
		getElementById('abrir').style.display = 'block';">[x]</a>
		</span>
	El choque entre el equipo paraguayo <i>Cerro 
	Porteño</i> y el peruano <i>Sporting Cristal</i> se destaca
	entre los ocho partidos que cerrarán esta semana
	la primera fase de la Copa Libertadores de América
	</div>
<br>
	<span id="abrir" style="display:none;" onclick="getElementById('din').style.display = 'block';
	this.style.display = 'none';"><a href="#">&lt;&lt;</a>
	</span>
<br>
</body>
</html>

Saludos!