Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

jcfr

show/hidden divs efeito lightbox {RESOLVIDO}

Mensagens Recomendadas

jcfr

boas pessoal...

estou a criar uma página onde tenho uma div oculta que mostro quando o cliente pretende contactar o vendedor... uso javascript para a mostrar ou ocultar... gostava de saber se existe alguma forma de aplicar o efeito lightbox no resto da página quando mostro a div, do genero que acontece aqui:

http://www.huddletogether.com/projects/lightbox2/

quando se carrega numa imagem...

a ideia era focar mais ainda a div colocando um genero de nevoeiro no resto da página...

se alguem me conseguir ajudar agradecia...

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
jcfr

ja andei a pesquisar mais um bocado e ja consegui mas obrigado na mesma...

é que eu desenrasco-me bem em php mas javascript e css so faço umas coisas e de resto tenho de ir aprendendo e so postei porque não estava a encontrar o que queria...

mas ja encontrei...

já agora fica aqui o exemplo que encontrei na net pa quem precisar:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>LIGHTBOX EXAMPLE</title>
	<style>
	.black_overlay{
		display: none;
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index:1001;
		-moz-opacity: 0.8;
		opacity:.80;
		filter: alpha(opacity=80);
	}
	.white_content {
		display: none;
		position: absolute;
		top: 25%;
		left: 25%;
		width: 50%;
		height: 50%;
		padding: 16px;
		border: 16px solid orange;
		background-color: white;
		z-index:1002;
		overflow: auto;
	}
</style>
</head>
<body>
	<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
	<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
	<div id="fade" class="black_overlay"></div>
</body>
</html

atenção que o código não é meu, retirei de:

http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

tem de se dar mérito a quem o tem...

está lá explicado como fazer...

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.