Crear un tipo de cortina en web

codeman1234 · #1 (**permalink**) 11/04/2012, 10:05

Hola a todos,

Necesito hacer lo siguiente:

Estoy creando una pagina de tipo de promocion, por ello necesito crear un tipo de cortina encima de la web la que desabilita todos los botones de la web y que se habilite al clicar en un boton (algo como poner una imagen encima de la web) la cual sea medio transparente para que se pueda ver detras de la imagen lo que es la web desabilitada, tenia la idea de hacerlo en photoshop pero el problema es que tengo en la web un slide que necesito que se vea como se mueve de detras de la cortina por ello no puedo usar una imagen. Alguna idea como puedo hacer eso en html/css.

Es posible hacerlo con un iframe por ejemplo?

Slds y gracias

#2 (**permalink**) 11/04/2012, 11:00

Te sugiero que, directamene en body crees una imagen png (fondos transparentes), y manejes, ademas del ancho y alto de pantalla, un z-index alto pero inferior al botón que te vaya a habilitar.

Mira en http://www.digitaleando.com/mundogeo/index.php

<body>
<input type="image" src="imagenes/botonver.png" alt="Ver mi posicion" style="bacground-color:transparent; border:0; margin:0; padding:0;z-index:100;" id="currentLocation" name="currentLocation" onclick="initiate_geolocation();" />


<div id="mundo_geo">
<img src="imagenes/mundo_geo_index.png" alt="Entrar en Mundo Geo" style="width:100%; z-index:50;" />
</div>

<div id="entrarindex">
<a href="mundogeo.php"> <img src="imagenes/botonentrarindex.png" alt="Entrar en Mundo Geo" style="z-index:100;" /></a>
</div>
...
</body>

En http://www.digitaleando.com/mundogeo/geollegar.php tienes básicamente la misma página con todo el espacio habilitado.

(Omito otros datos, pasando aquí a style="" lo que en realidad va en CSS, archivo enlazado.

OJO: Cuida los espacios de transparencia del png principal)

emprear · #3 (**permalink**) 11/04/2012, 11:05

Asi podés hacerlo

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[*/
div#ns {
position: fixed;
width: 100%;
height:100%;
background-color: #000;
color: #FFF;
top:0px;
left:0px;
text-align: center;
padding-top: 200px;
z-index: 999;
overflow:hidden;
opacity: 0.7;
}
 
span{
cursor: pointer;
}
/*]]>*/
</style>
 
<script type="text/javascript">
//<![CDATA[
function cerrar(){
document.getElementById('ns').style.display = 'none';
}
 
//]]>
</script>
</head>
<body>
<div id="ns">
<span onclick="cerrar();">Cerrar</span> 
 
</div>
<h1>Web</h1>
</body>
</html>

La capa "ns" deshabilita el resto y se posiciona sobre todo, y contiene un elemento que a su vez la cierra y libera el fondo

Saludos

codeman1234 · #4 (**permalink**) 11/04/2012, 12:01

Hola,

antes que nada gracias a los dos por responder, os cuento mis resultados:

txemaarbulo, he intentado hacerlo como comentas pero lo que me ocurre es que la imagen me baja la web, se pone encima de la web no por delante con lo que no me sirve ya que la imagen cortina deberia estar por delante de la web para que por detras en la transparencia se vea la web.

emprear, tu solucion de momento ha sido la mejor que he visto ya que lo he probado y hace exactamente lo que quiero que es ponerse por delante de la web con un efecto transparente el unico problema que tengo es que el raton es utilizable y yo lo que quiero es que los menus y enlaces de la web de atras sean desabilitados, que no se pueda clicar en todo lo que cubre la cortina por asi decirlo, sabes como podria hacer eso?

muchas gracias a los dos y un saludo

emprear · #5 (**permalink**) 11/04/2012, 12:09

@codeman1234, cualquier elemento que no esté contenido en el div "ns" estárá deshabilitado, yo solo dejé un span dentro para darle la oportunidad al cliente de que cierre la "cortina" como vos lo llamas, pero no es necesario, probala poniendo en el body

Código HTML:

Ver original<body>
<div id="ns">
<span onclick="cerrar();">Cerrar</span> 
</div>
<h1>Web</h1>
<a href="http://emprear.com">link</a><br />
<button onclick="alert('hola');">Hola</button>
</body>

vas a comprobar que el link y el button no funcionan

Saludos

#6 (**permalink**) 11/04/2012, 12:22

Me ojvidé de los más importante. position: fixed; para tu imagen del body.

codeman1234 · #7 (**permalink**) 11/04/2012, 13:21

Hola emprear,

si tienes razon funciona perfectamente ahora, la ultima cosa si no es pedir mucho queria preguntarte hay alguna forma de poner un banner (imagen) en el centro de la web

Hola txemarbulo, si tenias razon position fixed lo cambia bastante, pero la solucion de emprear me funciono mejor, muchas gracias igualmente.

Slds y gracias

emprear · #8 (**permalink**) 11/04/2012, 16:16

todo aquello que esté dentro de la capa "ns" va a ser visible y clickeable, incluso un tag <img>

Saludos

codeman1234 · #9 (**permalink**) 12/04/2012, 07:27

Hola emprear,

si gracias, ya lo he conseguido, muchas gracias de verdad!!!
txemaarbulo muchas gracias por tu ayuda tambien!!!

Slds y gracias a ambos!!