Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

Sign in to follow this  
jcfr

show/hidden divs efeito lightbox {RESOLVIDO}

Recommended Posts

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

Share this post


Link to post
Share on other sites
sc0rpion

Esse nevoeiro como tu chamas não é mais que uma div com opacity colocada por detrás da div que queres destacar.

Share this post


Link to post
Share on other 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...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.