Ir para conteúdo

Arquivado

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

Bruno_Ferreira

Janela Modal com elementos que estão trás desativados

Recommended Posts

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>

Só que não funciona nem a porrete!!!!!!

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...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sugiro usar algum tipo de xxxbox:

 

lightbox

thickbox (do site q você passou)

shadowbox

 

 

Agora, se você quer escrever uma, terá q ter noção das dimensões do document, além das propriedades de css, destacando o z-index.

 

Num breve resumo, a janela modal são dois divs.

 

O primeiro é overlay com z-index maior q os elementos do documento

 

O outro é o box com z-index maior q o overlay, centralizado é claro.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sugiro usar algum tipo de xxxbox:

 

lightbox

thickbox (do site q você passou)

shadowbox

 

 

Agora, se você quer escrever uma, terá q ter noção das dimensões do document, além das propriedades de css, destacando o z-index.

 

Num breve resumo, a janela modal são dois divs.

 

O primeiro é overlay com z-index maior q os elementos do documento

 

O outro é o box com z-index maior q o overlay, centralizado é claro.

 

Valeu JunioR, mas você poderia me explicar qual a diferença entre light, thick e shadow box? ou me indicar um link de exemplo de cada um?

Só mais uma coisa, como eu posiciono o box no centro da página independentemente da resolução do navegador e do tamanho do box?

 

Valeu!!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sugiro usar algum tipo de xxxbox:

 

lightbox

thickbox (do site q você passou)

shadowbox

 

 

Agora, se você quer escrever uma, terá q ter noção das dimensões do document, além das propriedades de css, destacando o z-index.

 

Num breve resumo, a janela modal são dois divs.

 

O primeiro é overlay com z-index maior q os elementos do documento

 

O outro é o box com z-index maior q o overlay, centralizado é claro.

 

Valeu JunioR, mas você poderia me explicar qual a diferença entre light, thick e shadow box? ou me indicar um link de exemplo de cada um?

Só mais uma coisa, como eu posiciono o box no centro da página independentemente da resolução do navegador e do tamanho do box?

 

Valeu!!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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