Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Vandrao

Div transparente preencher a tela inteira

Por , em Javascript

Recommended Posts

Vandrao    0

Vandrao
Postado

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif Fla ae brothers....

 

Tipo...tenhu um site que quando você clica em um link aparece uma div preta transparente na tela inteira e por cima dela outra div com o conteudo do link....o problema está ai...no FF colocando 50% na transparencia ela ocupa a tela inteira...mais no IE não acontece isso...queria saber como fazer isso...e outro problema é que se o bloco que aparecer quando eu clicar no link for grande vai ter a barra de rolagem...e quando acontece isso se eu abaixar a barra a transparencia não vai junto...ela só pega um tamanho...não continua de acordo com a barra de rolagem...

 

Aki ta o link do site:

 

Digital Systems

Compartilhar este post

Link para o post
Compartilhar em outros sites

Megadeth    2

Megadeth
Postado

Cadê o seu código? mostra a função que você está utilizando para mostrar a div transparente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vandrao    0

Vandrao
Postado

ta ae...eu crio ela

 

<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>	var divtrans = document.createElement("div");	divtrans.setAttribute('id', 'transp');	divtrans.className="transparencia";	if(navigator.appName == "Microsoft Internet Explorer"){		if(screen.width == "1024"){			divtrans.className="transparenciaIEgrande";				var altura = screen.height;			var altnav = altura - 154;			divtrans.style.height = altnav+"px";		}else{			divtrans.className="transparenciaIEpequeno";			var altura = screen.height;			var altnav = altura - 154;			divtrans.style.height = altnav+"px";		}	}else{		divtrans.className="transparenciaFF";			}</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vandrao    0

Vandrao
Postado

o problema é quando tem barra de rolagem....a div transparente fica apenas no espaço que inicia a pagina...se eu rolar para baixo a transparencia fica fixa la e o resto da pagina fica com a cor normal!!....Alguém sabe como fazer com que a div transparente vá pegando tudo?

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Editei o post e agora funciona no opera também.

 

Testa isso pra ver se é o que você procura.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strinct.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Div posição fixa</title>			<style type="text/css">html,body{	overflow: hidden;	height: 100%;	margin: 0px;	padding: 0px;}body{	font: 76% verdana, arial, sans-serif;}.transparencia{	position: fixed !important;	position: absolute;	top: 0px;	left: 0px;	z-index: 10;	width: 100%;	height:100%;	opacity: 0.6;	color: #000000;	background-color: #E0E0E0;	}*.transparencia{	filter: alpha(opacity = 60);}.fechar{	position: absolute;	width: 200px;	height: 200px;	margin-top: 30%;	margin-left: 30%;	z-index: 15;}</style></head><body>	<div id="div1" class="transparencia"></div>	<div class="fechar">		<input type="button" value="Fechar" onclick="this.style.display = 'none';document.getElementById('div1').style.display = 'none';document.body.style.overflow='auto';" />	</div>	asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />	asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />	asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />	asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />	asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />	asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />	asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />	asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />	asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />	asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />	asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />	asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br />asfdasfdasd<br />	asfdasfdasfd<br />	asfdasfdafd<br />	asfdasfdasfd<br />	asfdsafdsafd<br /></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

vidaloukaig    0

vidaloukaig
Postado

Bom eu fiz uma coisa melhor que pode ajudar nosso amigo... mudei a cor pra preto na transparência... mais ai fiquei na duvida.... coloquei um link na div.... fiz algumas modificações e deu nisso aqui:

 

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strinct.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Div posição fixa</title>

<style type="text/css">

html,body

{

overflow: hidden;

height: 100%;

margin: 0px;

padding: 0px;

}

body

{

font: 76% verdana, arial, sans-serif;

}

.transparencia

{

position: fixed !important;

position: absolute;

top: 0px;

left: 0px;

z-index: 10;

width: 100%;

height:100%;

opacity: 0.6;

color: #000000;

background-color: #000000;

}

 

*.transparencia

{

filter: alpha(opacity = 40);

}

 

.fechar

{

position: absolute;

width: 200px;

height: 200px;

margin-top: 30%;

margin-left: 30%;

z-index: 15;

}

 

</style>

</head>

<body>

<div id="div1" class="transparencia">

<div class="fechar">

asfdasfdasd

asfdasfdasf

asfdasfdafd

<a href="http://www.uol.com.br">www.uol.com.br</a>

asfdasfdasfd

<input type="button" value="Fechar" onclick="this.style.display = 'none';document.getElementById('div1').style.display = 'none';document.body.style.overflow='auto';" />

</div></div>

asfdasfdasd<br />

asfdasfdasfd<br />

asfdasfdafd<br />

asfdasfdasfd<br />

asfdsafdsafd<br />

asfdasfdasd<br />

asfdasfdasfd<br />

asfdasfdafd<br />

asfdasfdasfd<br />

asfdsafdsafd<br />asfdasfdasd<br />

asfdasfdasfd<br />

asfdasfdafd<br />

asfdasfdasfd<br />

asfdsafdsafd<br />

asfdasfdasd<br />

asfdasfdasfd<br />

asfdasfdafd<br />

asfdasfdasfd<br />

asfdsafdsafd<br />asfdasfdasd<br />

asfdasfdasfd<br />

asfdasfdafd<br />

asfdasfdasfd<br />

</body>

</html>

 

Só que ai pintou uma dúvida minha... tem alguma coisa errada que so o link da div aparece.... o conteudo não... se eu escrevo algo como "clique aqui para baixar" ele não mostra.... que que ta acontecendo ai?

Compartilhar este post

Link para o post
Compartilhar em outros sites

vidaloukaig    0

vidaloukaig
Postado

melhorei isso:

 

.fechar

{

position: absolute;

width: 300px;

height: 100px;

margin-top: 30%;

margin-left: 30%;

z-index: 15;

background-color:#FFFFFF;

font-family:Verdana, Arial, Helvetica, sans-serif;

color:#000000;

}

 

mais tipo... como fazer a div aparecer somente quando o cara clicar em alguma coisa???.... por exemplo.. ele clica no link e parece a div "tem certeza que deseja entrar nesse site "... ai ele clica e entra no site....

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito