Ir para conteúdo

POWERED BY:

Arquivado

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

t4v4res

[Resolvido] problemas em dimensionar div no ie

Por , em Javascript

Recommended Posts

t4v4res    0

t4v4res
Postado

Pessoal,

 

estou fazendo a seguinte ação:

 

quando o usuário clicar em um link aparece uma div no centro da tela e escurece o restante da tela.. só que estou tendo problemas:

 

* para dimensionar a div responsável por escurecer a tela eu uso o screen.width, mas no ie fica um pedaço sem escurecer do lado direito..

 

** estou usando um propriedade css para deixar trans parente a div que escurece a tela, mas essa propriedade não funciona no ie..

 

abaixo segue meu código:

 

html :

<html>
<head>
<script type="text/javascript">
function fechar(){
document.getElementById('escurece').style.display = 'none';
document.getElementById('div1').style.display = 'none';
}
function abrir(){
document.getElementById('div1').style.left = (screen.width - 500 ) / 2 + "px";
document.getElementById('div1').style.top = (screen.height - 400 ) / 2 + "px";
document.getElementById('escurece').style.display = 'block';
document.getElementById('div1').style.display = 'block';
}
</script>

<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="escurece">
<div id="div1">
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste 

<a href="#" onclick="fechar()">click</a>
</div>
</div>
<a href="#" onclick="abrir()">click</a>

</body>
</html>

css :

 

body {
	background: green;
}

#div1 {	
	position: absolute;
	height:200px; 
	width:500px;
	display:none; 
	z-index:3; 
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px; 
	color:#000000; 
	background:#FFFFFF;
	border: solid #257 2px;	
}

#div1 a{
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px; 
	color:#000000; 
	text-decoration:none; 
	font-weight:bold;
}

#div1 a:hover{
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px; 
	color:#555555; 
	text-decoration:none; 
	font-weight:bold;
}

#escurece {
	width:100%; 
	height:100%; 
	position:absolute; 
	background:#000000; 
	top:0px; 
	left:0px; 
	display:none; 
	z-index:2; 
	/*opacity: 0.65; /* essas propriedade dão pau no ieca */
	filter: alpha(opacity=65);*/ 
}

Agradeço qualquer ajuda!

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Alguns tipos de filtro funcionam apenas em alguns navegadores. Outros funcionam em mais de um navegador, porém é necessário ajustar a sintaxe.

Uma maneira simples para resolver esse tipo de problema é criar uma imagem GIF quadriculada, com pixels sólidos intercalados com pixels transparentes e deixar essa imagem como background de sua div de fundo.

 

Dessa maneira, o seu script irá rodar na maioria dos navegadores, pois eles não estarão utilizando o filtro alpha ou qualquer outro filtro. Após criar a imagem (sugiro 128x128 pixels), salve-a no mesmo diretório onde será salvo o código a seguir:

 

<html>
<head>
<script type="text/javascript">
function abrir_fundo() {
var fundo1 = document.getElementById("fundo1");
fundo1.style.top = "0px";
fundo1.style.left = "0px";
fundo1.style.width = document.body.clientWidth;
fundo1.style.height = document.body.clientHeight;
fundo1.style.display = "block";

var fundo2 = document.getElementById("fundo2");
fundo2.style.top = (document.body.clientHeight/2)-(fundo2.offsetHeight/2);
fundo2.style.left = (document.body.clientWidth/2)-(fundo2.offsetWidth/2);
fundo2.style.visibility = "visible";
}

function fechar_fundo() {
var fundo1 = document.getElementById("fundo1");
fundo2.style.visibility = "hidden";
fundo1.style.display = "none";
}
</script>
</head>

<body leftmargin="10px">
<div id="fundo1" style="position:absolute; z-index:2; display:none; background-image:url(fundo.gif); background-repeat: repeat">
</div>
<div id="fundo2" style="position:absolute; z-index:3; visibility:hidden; background-color:#FFFFFF; width:100; height:120">Textos, fotos, etc...
<br><br>
<a href="java script: fechar_fundo()">X Fechar</a>
</div>
<a href="java script: abrir_fundo()">Clique para abrir</a>
<br><br>Clique para abrir<br><br>Clique para abrir<br><br>Clique para abrir<br><br>Clique para abrir<br><br>Clique para abrir<br><br>
</body>
</html>

Basta ajustar o código ao seu caso.

 

Nunca é demais repetir que o fórum altera 'javascript' para 'java script' separado: <a href="java script: abrir_fundo()">Clique para abrir</a>. Por isso, deixe como javascript no seu código-fonte.

 

-- Tópico editado --

De todo modo, se ainda preferir utilizar o filtro aplha, segue a gambiarra:

<html>
<head>
<style>
#fundo1 {
position:absolute; z-index:2;
display:none; background-color:#000000; 
opacity: .4;
filter: alpha(opacity=40);
}	

#fundo2 {width:100; height:120;
position:absolute; z-index:3;
visibility:hidden; background-color:#FFFFFF;
}
</style>

<script type="text/javascript">
function abrir_fundo() {
var fundo1 = document.getElementById("fundo1");
fundo1.style.top = "0px";
fundo1.style.left = "0px";
fundo1.style.width = document.body.clientWidth;
fundo1.style.height = document.body.clientHeight;
fundo1.style.display = "block";

var fundo2 = document.getElementById("fundo2");
fundo2.style.top = (document.body.clientHeight/2)-(fundo2.offsetHeight/2);
fundo2.style.left = (document.body.clientWidth/2)-(fundo2.offsetWidth/2);
fundo2.style.visibility = "visible";
}

function fechar_fundo() {
var fundo1 = document.getElementById("fundo1");
fundo2.style.visibility = "hidden";
fundo1.style.display = "none";
}
</script>
</head>

<body leftmargin="10px">
<div id="fundo1">
</div>
<div id="fundo2">Textos, fotos, etc...
<br><br>
<a href="java script: fechar_fundo()">X Fechar</a>
</div>
<a href="java script: abrir_fundo()">Clique para abrir</a>
<br><br>Clique para abrir<br><br>Clique para abrir<br><br>Clique para abrir<br><br>Clique para abrir<br><br>Clique para abrir<br><br>
</body>
</html>

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