Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa Tarde pessoal,
Tô quebrando o coco fazendo uma janeja modal em que todos os elementos que aparecem atrás dela fiquem desativos. Mais ou menos como esse site aqui:
http://www.aserenata.com.br/produtos/produ...lhe.php?id=1027
Notem que quando se clica na guitarra, aparece a imagem ampliada com os elementos que ficam atrás "inclicáveis".
Um colega me indicou que eu fizesse dois divs, um seria a janela em sí e outro uma espécie de tampa que ficaria entre a janela e o body do documento, pra que o usuário não consiga clicar em nada enquanto a janela modal estivesse aberta. Seguindo isso, fiz isso aqui:
<html>
<head>
<title>teste Divs</title>
<style>
body{
z-index:1;
}
.plano2{
position: absolute;
top: 0;
left: 0;
visibility: hidden;
background: #FFFFFF url("back.png") repeat;
width: 100%;
height: 100%;
z-index: 2;
}
.plano3{
visibility: hidden;
background: #FFFFFF;
position: absolute;
top: 300;
left: 500;
height: 200;
width: 300;
text-align: center;
border-style: condensed;
border-width: 7;
border-color: aqua;
z-index: 3;
}
</style>
<script>
function mostra(){
document.getElementById('plano2').style.visibility="visible";
document.getElementById('plano3').style.visibility="visible";
}
</script>
</head>
<body class="base">
Conteúdo da página em primeiro plano<br>
<input type="button" name="mostrar" value="mostrar" onclick="java script:mostra();"/>
<!--tampa entre a janela modal e o body do documento-->
<div name="plano2" class="plano2" id="plano2">
</div>
<!--janela modal-->
<div name="plano3" class="plano3" id="plano3">
Texto em 3 plano
</div>
</body>
</html>Alguém sabe outra forma de fazer isso?
Esse back.png tem que ser uma imagem semitransparente, já tentei fazer no corel draw e no Inkscape mas não consegui, se alguém puder me indicar como faço também...
Carregando comentários...