Ir para conteúdo

POWERED BY:

Arquivado

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

Beto Lima

Div por cima de tudo

Por , em Javascript

Recommended Posts

Beto Lima    0

Beto Lima
Postado

Pessoal, andei pesquisando e não encontrando o que eu queria.

 

Preciso da seguinte solução.

 

tipo clicar em um link e a tela ficar toda bloqueada com uma pelicula escura (tipo quando vai se alterar a foto do orkut), e mostrar no meio da tela uma div com tamanhos 300 x 300 por exemplo.

 

e é nessa div que vou colocar o conteúdo...

 

alguém sabe onde posso encontrar por isso?

 

valeu..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno_Ferreira    1

Bruno_Ferreira
Postado

Meu caro, o que você está querendo é um lightbox certo? tipo esse aqui do link: www.aserenata.com.br

 

Basta você fazer o seguinte, faça dois divs além da página principal, um irá apresentar uma imagem, geralmente semitransparente "tampando" o conteúdo da página, e por cima dela o seu box.

 

Utilize uma função javascript para mostrar/esconder os div's.

Compartilhar este post

Link para o post
Compartilhar em outros sites

CappiLevi    1

CappiLevi
Postado

Pessoal, andei pesquisando e não encontrando o que eu queria.

 

Preciso da seguinte solução.

 

tipo clicar em um link e a tela ficar toda bloqueada com uma pelicula escura (tipo quando vai se alterar a foto do orkut), e mostrar no meio da tela uma div com tamanhos 300 x 300 por exemplo.

 

e é nessa div que vou colocar o conteúdo...

 

alguém sabe onde posso encontrar por isso?

 

valeu..

Eu sei exatamente o que você quer. Tenho este sistema no meu site. Eu utilizo 2 class chamadas jqModal, e jquery, onde aparece uma div no centro com uma mensagem à sua escolha e o fundo fica meio escuro.

 

Deixa eu só encontrar aqui a opção de anexar arquivos que já te passo... Alguém pode me dizer como anexar arquivos aqui? No painel diz que tenho 2 mb para anexos...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno_Ferreira    1

Bruno_Ferreira
Postado

Boa pergunta ultimate, sempre precisei mas nunca consegui acexar arquivos aqui...

 

Mas o código pode ser mais ou menos esse, é bem simples, mas dá pra ter uma idéia:

 

<html>
	<head>
		<title>teste Divs</title>
		<style>
				//camada principal
		body{
			z-index:2;
		}
				//este plano "tampa" a camada principal para que não seja possível acessá-la
		.plano2{
			position: absolute;
			top: 0px;
			left: 0px;
			visibility: hidden;
			background: url("back.png") repeat;
			background-color: transparent;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
				//aqui é o seu div de conteúdo, que fica posicionado ao centro da página
		.plano3{
			visibility: hidden;
			background: #FFFFFF;
			position: absolute;
			top: 50%;
			left: 50%;
			height: 400px;
			width: 600px;
			margin-top: -200px;
			margin-left: -300px;
			text-align: center;
			padding: 5 5 5 5px;
			border-style: solid;
			border-width: 5px;
			border-color: #1E679A;
			z-index: 3;
		}
		</style>
		<script>
						//função para mostrar os divs de conteúdo e o "tampão"
			function mostra(){
				document.getElementById('plano2').style.visibility="visible";
				document.getElementById('plano3').style.visibility="visible";
			}
						//função para esconder os divs
			function esconde(){
				document.getElementById('plano2').style.visibility="hidden";
				document.getElementById('plano3').style.visibility="hidden";
			}
		</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();"/>
				<!--div de tampão que impossibilita o usuário de trabalhar com a camada principal-->
		<div name="plano2" class="plano2" id="plano2">
		</div>
				<!--div de conteúdo, esse é a caixa chamada de ligthbox-->
		<div name="plano3" class="plano3" id="plano3">
			Texto em 3 plano
			<br/>
			<input type="button" name="esconder" value="esconder" onclick="java script:esconde();"/>
		</div>
	</body>
</html>

A imagem back.png citada no estilo, deve ser uma imagem semitransparente, pra ficar com o visual bem bacana, dá pra fazer em corel draw, ilustrator, photoshop, photoPaint e até no Inkscape. o ideal é que seja uma imagem 1x1024, aí ela se repete pelo eixo y.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Beto Lima    0

Beto Lima
Postado

Já queria agradecer a todos pela ajuda.

Ainda não testei nada porque estou numa lanhouse agora. Vou copiar esta página e em casa irei fazer os testes...

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