¿Como crear una capa que ocupe casi todo el espacio y se pueda cerrar?

#1 (**permalink**) 13/12/2011, 13:52

He visto en algunas web que al cargar el index, por ejemplo, te cargan una capa en grande deshabilitando el resto de la página hasta que lees el mensaje y pulsas aceptar. Entonces la capa se cierra y puedes interactuar con la página.

Como idea para hacer un menú, me gustaría poder crear un enlace en la página web para que cuando el usuario haga clic en el, se abra una capa ocupando casi todo el espacio y deshabilite el resto. Para salir de la capa, el usuario tendría un enlace en la parte superior derecha del cuadro con el texto "Cerrar".

¿Como podría hacer esto? He trasteado por Google, pero como no se como se llama esto, no he encontrado nada.

emprear · #2 (**permalink**) 13/12/2011, 22:28

cambiando la propiedad display con javascript, no necesariamente tiene que ser sobre un link, podría ser sobre una imagen u otro elemento.

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
html, body {
margin: 0;
padding: 0;
border: none;
}
body {
height: 100%;
}
div#capaoculta{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left:0;
margin: 0;
padding: 0;
background-color: #CCC;
display: none;
}
 
/*]]>*/
</style>
</head>
<body>
<p>
<a href="#" onclick="document.getElementById('capaoculta').style.display='block';">abrir</a>
</p>
<div id="capaoculta">
<a href="#" onclick="document.getElementById('capaoculta').style.display='none';">cerrar</a>
</div>
</body>
</html>

Saludos

#3 (**permalink**) 14/12/2011, 09:27

Muchisimas gracias por tu ayuda emprear, con esto ya puedo continuar con el diseño de una web que tenía entre manos. Saludos.