porner div a toda pantalla semi transparente mietras carga pagina

chalchis · #1 (**permalink**) 23/10/2006, 14:23

Hola amigos como puedo hacer para poner un div semitrasparente asi mas o menos como del estilo de http://jquery.com/demo/thickbox/ mientras termina de cargar la pagina y asi evitar que le den click a cualquier url o link del sitio hasta que este terminde cargar y quite la capa

o si saben de un site que lo haga eso parecido?

saludos espero sus comentarios

f_murciano · #2 (**permalink**) 04/11/2006, 02:53

Hola

¿has conseguido solucionar el problema?

Me parece interesante el tema, voy a investigar un poco.

Saludos

chalchis · #3 (**permalink**) 04/11/2006, 02:56

nop aun no consigo
una solucion amigo
gracias por responder

saludos

Osorio06 · #4 (**permalink**) 04/11/2006, 06:05

Una idea:
1. creas una capa, donde van los datos, con visibility = "hidden"
3. creas otra capa, la de cargando, con visibility = "visible"
3. en el evento onload les cambias a ambas el visibility.

Espero que te ayude. Un saludo.

chalchis · #5 (**permalink**) 06/11/2006, 11:21

gracias Osorio06 por responder si exacto es la idea pero tendrias algun ejemplo mira lo que intento hacer es algo parecido a esto

si entras a este sitie veras que se visualiza una capa que dice "espere porfavor cargando" este div se quita cuando la pagina esta totalmente cargada

http://www.ezwp.com/desarrollo-web/

yo esto lo quiero hacer pero que aparesca una capa como al de thicbox
http://jquery.com/demo/thickbox/ asi semi trasparente y que este ahi hasta que termine caragar sin permitirme hacer clic a nda hasta que termine

saludos

Cita:

Iniciado por Osorio06

Una idea:
1. creas una capa, donde van los datos, con visibility = "hidden"
3. creas otra capa, la de cargando, con visibility = "visible"
3. en el evento onload les cambias a ambas el visibility.

Espero que te ayude. Un saludo.

xcorpyon · #6 (**permalink**) 06/11/2006, 15:57

Buenas
Aqui te dejo un ejemplo
Se basa en 2 capas: en la primera metes tu página, y en la segunda está el tipico "cargando..."
En firefox funciona perfectamente, pero en el grandisimo IE no, y no entiendo por qué (parece ser q no admite el filtro de opacidad en la etiqueta DIV... entre otras cosas). Si alguien soluciona el problema IE que la haga saber.

Código HTML:

<html>
<body onLoad="habilitarPagina();" style="margin:0px;">
<script>
function habilitarPagina() {
	document.getElementById('capa_cargando').style.visibility = 'hidden';
	document.getElementById('capa_principal').style.opacity = 1;
}
</script>
<style>
	.clase_principal {opacity:0.5;}
	.clase_cargando {
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
	}
</style>
<div id="capa_principal" class="clase_principal">
	<!-- toda la página principal empieza aqui -->
	<iframe style="border:0px; width:100%; height:100%;" src="http://www.forosdelweb.com"></iframe>
	<!-- aquí termina toda la página principal -->
</div>
<div id="capa_cargando" class="clase_cargando">
	<div style="position:absolute; top:250px; left:350px; width:200px; height:20px; border:1px solid #FF6666;background-color:#000000;color:#FFFFFF; text-align:center;">
		<b>cargando...</b>
	</div>
</div>
</body>
</html>

Un saludo.

chalchis · #7 (**permalink**) 06/11/2006, 16:09

orale men diste en el clavo asi es como lo que deseo hacer pero una pregunta como puedo hacerle para que cuando muestre la capa de cargando....
al usuario este no pueda hacer ningun clic en las urls que se van mostrando en la pagina como puedo hacer eso o algun consejo para buscar en san google??

saludos
y gracias por la ayuda

xcorpyon · #8 (**permalink**) 06/11/2006, 17:19

arreglado en mi primer post (comentaba con // en un CSS, cosa q no se puede y creía q si)
de todos modos falta por solucionar el tema IE... ¿alguien se anima?

Osorio06 · #9 (**permalink**) 06/11/2006, 20:56

Cita:

que cuando muestre la capa de cargando....
al usuario este no pueda hacer ningun clic en las urls que se van mostrando en la pagina

la capa de cargando tiene que tener el z-index mayor que el resto.

Cita:

de todos modos falta por solucionar el tema IE

filter:alpha(Opacity=50)

Un saludo.

chalchis · #10 (**permalink**) 06/11/2006, 23:54

gracias Osorio06 va quedando esto solo faltaria que en explorer
se resuelva

saludos

Cita:

Iniciado por Osorio06

la capa de cargando tiene que tener el z-index mayor que el resto.

filter:alpha(Opacity=50)

Un saludo.

chalchis · #11 (**permalink**) 07/11/2006, 01:27

hola amigos encontre algo en el foro

http://www.forosdelweb.com/f127/oscurecer-fondo-cuando-abre-popup-aviso-411266/

solo seria cuestion de adaptarlo como ven

saludos
espero sus comentarios

a ver si me sale