Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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"><a href="#" onclick="fechar()">click</a>
</div>
</div>
<a href="#" onclick="abrir()">click</a>
</body>
</html>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);*/
}valeu kara!
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:
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: