Div transparente + fixar

[Eduardo Novaes 0]

Pessoal,

 

Estou com um probleminha "simples".

 

Antes de qualquer coisa, já vi dois tópicos aqui no iMasters relacionados ao meu problema, no entanto não tive sucesso com o meu problema.

 

Post1.: http://forum.imasters.com.br/index.php?sho...mode=linearplus

Post2.: http://forum.imasters.com.br/index.php?showtopic=224226

 

No primeiro post, funciona normalmente, é até abordado a questão do bloqueio não funcionar na página completa quando se tem um scroll e a solução encontrada lá foi fazer com que seja efetuado o bloqueio e também seja feito o overflow = hidden e, quando clicar para fechar a tela, é ativada novamente o scroll.

 

Mas meu problema é que, o bloqueio tem que ser feito em toda a tela com scroll e com o mesmo (overflow = auto), ou seja, o bloqueio tem que vir a página inteira com a possibilidade de utilizar o scroll para ver os resultados abaixo, creio que possa ser melhor entendido através da imagem abaixo:

 

Imagem1: Nesta imagem, como não tem scroll lateral, o bloqueio funciona corretamente (div de bloqueio) com o outro div por cima com a imagem de 'loading'.

 

Imagem2: Nesta imagen, como existe o scroll, ocorre apenas o bloqueio parcial.

 

Consigo colocar um bloqueio total se, além do div já utilizado eu colocar um outro div de baixo para cima, como pode ser visualizado abaixo:

.transparenciaTop{	position: fixed !important;	position: absolute;	top: 0px;	left: 0px;	z-index: 10;	width: 100%;	height:100%;	opacity: 0.6;	color: #000000;	background-color: #E0E0E0;	}*.transparenciaTop{	filter: alpha(opacity = 60);}.transparenciaBottom{	position: fixed !important;	position: absolute;	bottom: 0px;	left: 0px;	z-index: 10;	width: 100%;	height:100%;	opacity: 0.6;	color: #000000;	background-color: #E0E0E0;	}*.transparenciaBottom{	filter: alpha(opacity = 60);}.loading{	position: absolute;	width: 400px;	height: 180px;	margin-top: 20%;	margin-left: 35%;	z-index: 15;	background-image: url(../IMAGES/loading_comex.gif);	background-repeat: no-repeat;	background-position: center;	border: 0px solid black	}

Só que se eu fizer isso, acorre que, no momento em que um div fica sobre o outro, a transparencia vai dar diferença de cor.

 

O que quero saber se alguém sabe como fazer com que o div, mesmo que com a barra de rolagem, ocupe todo o espaço utilizado do browser!

 

Obrigado a todos.

[brcontainer 16]

Em primeiro lugar pq você criou classes indenticas tipo a .transparenciaTop e a .transparenciaBottom

são indenticas não sei qual o propositito mas acho desnecessario :P

hehe

 

 

como resolver seu problema:

 

primeiro utilize o overflow:hidden e depois do loading coloque overflow: visible; ou overflow:auto;

 

ou você pode fazer isso:

 

.transparenciaTop{	position: fixed !important;	position: absolute;	top: 0px;	left: 0px;	z-index: 10;	width: 100%;	height:100%;	opacity: 0.6;	color: #000000;	background-color: #E0E0E0;	}*.transparenciaTop{	filter: alpha(opacity = 60);	width:expression(document.body.scrollWidth + "px");	height:expression(document.body.scrollHeight + "px");}

[klaygomes 0]

Eu acho que seria mais fácil você definir as propriedades heigth e width da div flutuante através das propriedades document.body.clientHeight e clientWidth respectivamente.

[brcontainer 16]

Eu acho que seria mais fácil você definir as propriedades heigth e width da div flutuante através das propriedades document.body.clientHeight e clientWidth respectivamente.

engano seu eu fiz o teste com 'client'obitive melhor resultado com SCROLL

 

:P

qualquer coisa tente

overflow:hidden e overflow:visible;

[klaygomes 0]

Silver, você esta certo...Ontem fiz um pequeno teste e acabei esquecendo que o problema não era esconder a parte visivel com a div, mas sim todo o conteúdo da página :D Sobre o erro, testei aqui o seu CSS e funcionou ;)

[Eduardo Novaes 0]

Em primeiro lugar pq você criou classes indenticas tipo a .transparenciaTop e a .transparenciaBottom

são indenticas não sei qual o propositito mas acho desnecessario :P

hehe

 

 

como resolver seu problema:

 

primeiro utilize o overflow:hidden e depois do loading coloque overflow: visible; ou overflow:auto;

 

ou você pode fazer isso:

 

.transparenciaTop{	position: fixed !important;	position: absolute;	top: 0px;	left: 0px;	z-index: 10;	width: 100%;	height:100%;	opacity: 0.6;	color: #000000;	background-color: #E0E0E0;	}*.transparenciaTop{	filter: alpha(opacity = 60);	width:expression(document.body.scrollWidth + "px");	height:expression(document.body.scrollHeight + "px");}

Amigo, elas não são totalmente iguais, como expliquei uma é top = 0px e a outra é bottom = 0px, por isso havia feito um teste para ver se bloqueva toda a tela.

 

Vou dar uma olhada na sua sugestão, obrigado!

[brcontainer 16]

vai na fé que funciona http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

abraço

[Eduardo Novaes 0]

...por o DIV flutuante (absolute) depois de todo conteudo...

Silver,Continua com o mesmo problema que apresentei na imagem 2.Digamos que estou colocando um break point, daí quando clico em pesquisar, paro a execução e vou lá ver como está, continua bloqueando apenas a área visível, mas se eu pegar o scroll e rolar para baixo, aquela parte de baixo não está sendo bloqueada, então suponha que tenho alguns botões lá para baixo, podemos chegar a conclusão que, se estou em uma página inserindo uns registros e clico para inserir, esse processo me demora alguns segundos até ser confirmado, mas o usuário está impaciente e clica mais umas 3 vezes, pois não foi bloqueada a tela, então são inseridos 4 registros ao invés de apenas 1.Por isso preciso que todo o conteúdo seja bloqueado, ao invés apenas da área visível no momento da execução.E mais...Acabei de testar e se estou com a barra rolada lá em baixo e clico no botão para executar algo, como no Div foi dito que seja top=0px, então ele começa a bloquear do top, ficando também um espaço desbloqueado, como mostrado na imagem 2.

[Eduardo Novaes 0]

Uma idéia que eu tive foi fazer um div com 100% (height e width), até aí tudo bem, ele ocupá toda a parte que está sendo visualizada, sem ter rolado o scroll, mas fazendo com que esse div, caso o scroll seja rolado, ele irá acompanhar, fazendo dessa forma uma mascara que sempre irá ocupar o espaço visualizado.Alguém sabe como fazer isso ou já viu algo parecido?

[brcontainer 16]

sim é simples de fazer mas tente o CSS que eu passei primeiro

tire os

.transparenciaBottom{	position: fixed !important;	position: absolute;	bottom: 0px;	left: 0px;	z-index: 10;	width: 100%;	height:100%;	opacity: 0.6;	color: #000000;	background-color: #E0E0E0;	}*.transparenciaBottom{	filter: alpha(opacity = 60);}

por que aqui deu certo :P

 

você tentou o OVERFLOW:visible; e hidden??

 

você tambem pode por todo seu onteudo dentro de uma DIV com overflow:auto;

 

assim:

 

<style>body{	margin:0;	overflow:hidden;}.corpo{	overflow:auto;	width:100%;	height:100%;}.transparenciaTop{	position: absolute;	top: 0px;	left: 0px;	z-index: 10;	width: 100%;	height:100%;	opacity: 0.6;	color: #000000;	background-color: #E0E0E0;	}*.transparenciaTop{	filter: alpha(opacity = 60);}</style><div class="transparenciaTop">*************DIV FLUTUANTE***********************</div><div class="corpo">****************CONTEUDO DE TODA SUA PAGINA****************</div>

[Eduardo Novaes 0]

Silver,

 

Olha só que interessante e ve se tu já viu algum lugar que mostra como fazer...

 

http://g1.globo.com/Noticias/Mundo/0,,MUL138616-5602,00.html

 

Explicação: Quando clica na foto, para ampliar, abre uma foto maior no DIV e o melhor de tudo, com um bloqueio na tela, como se fosse um DIV MODAL, podendo mover a barra de rolagem, e mesmo assim, continua com o bloqueio.

 

Abraço.

[brcontainer 16]

isso ae se chama LIGHTBOX busca na NET que temfalou

[Eduardo Novaes 0]

isso ae se chama LIGHTBOX busca na NET que temfalou

Vou procurar.Vlw.