Publicado em 23 de dez.

[Resolvido] efeito de aparecer div e o resto do site ficar cinza

gente gostaria de saber como desenvolver um script que você clica em um link e aparece uma div no meio da tela e o resto do site fica meio cinza opaco.

um exemplo é o site do baixaki que na pagina de download de um programa você clica nas fotos do programa e aparece as fotos no meio da tela e o resto do site fica cinza.

obrigado

Discussão (13)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Layo· 23 de dez.

Se chama Lightbox ..

Acesse esse site especifico para o assunto o download já vem com os arquivos necessarios e o site explica em detalhes todas as funções

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

guih_oliveira10· 23 de dez.

valeu vou dar uma olhada e falo se funfou

guih_oliveira10· 23 de dez.

funcionou sim

so que so com fotos...

como faço pra no lugar da foto aparecer textos e outras coisas?

muito obrigado

Layo· 23 de dez.

O lightbox tem suporte para textos sim ..basta colocar no TITLE..

rel="lightbox[sua galeria]" title="Seu texto"

Agora se você deseja por exemplo abrir videos, wma, swf, youtube, yahoo video ...etc..outras funções o aconselhavel seria o shadowbox ..

Olha ai o site..

http://www.shadowbox-js.com/

guih_oliveira10· 23 de dez.

ta fiz o download deste shadowbox, veio um bando de arquivos.

mas como coloca-lo em meu site?

Layo· 23 de dez.

Tenta fazer ele é parecido com o lightbox.. a dúvida que surgir você posta...

guih_oliveira10· 23 de dez.

beleza

valeu

guih_oliveira10· 23 de dez.

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>
<link rel="stylesheet" href="estilo.css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/shadowbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="[http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">](http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js)
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/shadowbox.js"></script>
</head>

<script type="text/javascript">
$(document).ready(function(){
 $('#aparecer').click(function(){
 $('#opcoes').slideDown('slow')
 opcoes.style.display="block";
 buscar.style.display="none";
 });
});
function retirarMenu(){
	buscar.style.display="block";
	opcoes.style.display="none";
}
</script>

<body topmargin="0" leftmargin="0" rightmargin="0">
<div id="estrutura_topo">
<div id="topo">
<div id="cabecalho">
 <img src="logo.jpg" width="1000" height="200"/>
</div>
<div id="menu">
<img src="imagens/menu.jpg" width="1000" height="78"/>
</div>

</div>
</div>

<div id="buscar">
<form name="pesquisar" method="post" action="">
 <p>Pesquisar:
 <input name="buscar" type="text" id="pesquisar" size="35">
 <label>
 <input type="submit" name="ok" id="ok" value="Buscar">
 </label>
 <a href="javascript:;" id="aparecer">Mais opções</a></p>
</form>
 </div>

<div id="opcoes">
<form name="pesquisar" method="post" action="">
 <p>Pesquisar:
 <input name="buscar" type="text" id="pesquisar" size="35">
 <label>
 <input type="submit" name="ok" id="ok" value="Buscar">
 </label>
 <label>
 <select name="onde" id="onde">
 <option value="teste" selected>Teste</option>
 <option value="teste">teste</option>
 <option value="teste">teste</option>
 <option value="teste">teste</option>
 </select>
 </label>
 <a href="javascript:;" onClick="retirarMenu()">Menos opções</a>
 <br>
 <label>
 <input name="site" type="radio" value="site" checked align="absbottom">
 No site
 <input name="google" type="radio" value="google" align="absbottom">
 No google
 </label>
 </p>
</form>
</div>

<div id="propaganda">
<div class="bordaBox">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="conteudo">
<script type="text/javascript"><!--
google_ad_client = "pub-3984000644076850";

/ norma borges 2010 /

google_ad_slot = "3846042158";
google_ad_width = 728;
google_ad_height = 90;

//--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
</div>

<div id="conteudo">
<div class="encima"></div>
<div class="conteudo3">
 <p>Conteudo</p>
 <p><a href="[http://www.google.com"](http://www.google.com) rel="shadowbox" title="Cadastre-se">Cadastre-se</a></p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
</div>
 <div class="embaixo"></div>
</div>

<div id="menu_vertical">
<div class="encima_menu"></div>
<div class="conteudo2">
 <div id="membro">
 <div id="foto" align="center">
 <div class="titulos" align="left"><img src="imagens/membros.gif" width="271" height="32" align="absbottom"/></div>
 <form name="logar" method="POST" action="<?php echo $loginFormAction; ?>">
 <p align="center"><strong>Usuário:
 </strong>
 <p align="center">
 <label>
 <input type="text" name="usuario" id="usuario">
 </label>
 </p>
 <p align="center"><strong>Senha:
 </strong>
 <p align="center">
 <label>
 <input type="text" name="senha" id="senha">
 </label>
 <br>
 <a href="usuarios/esqueci.php">Esqueci minha senha</a>
 <p align="center">
 <label>
 <input type="submit" name="login" id="login" value="Entrar">
 </label>
 </p>
 </form>
 </div>
 </div>
<div class="menu_membro" align="center">
<div class="titulos" align="left"><img src="imagens/menu.gif" width="277" height="32" align="absbottom"/></div>
 <p>Inicio</p>
 <p>Galeria de fotos</p>
 <p>Vídeos</p>
 <p>Fale conosco</p>
 <p>Contato</p>
</div>
</div>
<div class="menu_membro" align="center">
<div class="titulos" align="center"><img src="imagens/duvidas.gif" width="277" height="32" align="absbottom"/></div>
 <a href="duvidas.php">
 <p>Como me cadastro?</p>
 <p>Não consigo comentar nas fotos</p>
 <p>Não consigo comentar nos vídeos</p>
 <p>Não consigo logar-me</p>
 <p>Esqueci minha senha. E agora?</p>
 <p><strong>Outras dúvidas</strong></p>
 </a>
 </div>
 <div class="embaixo_menu"></div>
</div>

</body>
</html>

tentei desta forma e nao consegui, como fazer?

coloquei a tag:

<a href="http://www.google.com" rel="shadowbox" title="Cadastre-se">Cadastre-se</a>

nao funfou

Layo· 23 de dez.

Eu nao sei como você renomeou os arquivos mais vamos lah..

<link rel="stylesheet" type="text/css" href="**suapasta_com_o_css_baixado**/shadowbox.css">

<script type="text/javascript" src="**suapasta_com_o_query_baixado**/jquery-1.3.2.js"></script>

<script type="text/javascript" src="**suapasta_com_o_query_baixado**/shadowbox.js"></script>

<script type="text/javascript">

// Aqui você define os players..

Shadowbox.init({

players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']

});

</script>

// Ai você coloca

guih_oliveira10· 24 de dez.

<?php require_once('Connections/belucao.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")

{

 if (PHP_VERSION < 6) {
 $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
 }

 $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

 switch ($theType) {
 case "text":
 $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
 break;
 case "long":
 case "int":
 $theValue = ($theValue != "") ? intval($theValue) : "NULL";
 break;
 case "double":
 $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
 break;
 case "date":
 $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
 break;
 case "defined":
 $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
 break;
 }
 return $theValue;
}
}
?>
<?php

// *** Validate request to login to this site.

if (!isset($_SESSION)) {
 session_start();
}

$loginFormAction = $_SERVER['PHP_SELF'];
if (isset($_GET['accesscheck'])) {
 $_SESSION['PrevUrl'] = $_GET['accesscheck'];
}

if (isset($_POST['usuario'])) {
 $loginUsername=$_POST['usuario'];
 $password=$_POST['senha'];
 $MM_fldUserAuthorization = "nivel";
 $MM_redirectLoginSuccess = "usuarios/index.php";
 $MM_redirectLoginFailed = "usuarios/erro.php";
 $MM_redirecttoReferrer = false;
 mysql_select_db($database_belucao, $belucao);

 $LoginRS__query=sprintf("SELECT usuario, senha, nivel FROM usuarios WHERE usuario=%s AND senha=%s",
 GetSQLValueString($loginUsername, "text"), GetSQLValueString($password, "text"));

 $LoginRS = mysql_query($LoginRS__query, $belucao) or die(mysql_error());
 $loginFoundUser = mysql_num_rows($LoginRS);
 if ($loginFoundUser) {

 $loginStrGroup = mysql_result($LoginRS,0,'nivel');

 //declare two session variables and assign them
 $_SESSION['MM_Username'] = $loginUsername;
 $_SESSION['MM_UserGroup'] = $loginStrGroup;

 if (isset($_SESSION['PrevUrl']) && false) {
 $MM_redirectLoginSuccess = $_SESSION['PrevUrl'];
 }
 header("Location: " . $MM_redirectLoginSuccess );
 }
 else {
 header("Location: ". $MM_redirectLoginFailed );
 }
}
?>
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>
<link rel="stylesheet" href="estilo.css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/shadowbox.css">
<script type="text/javascript" src="[http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">](http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js)
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/shadowbox-jquery.js"></script>
<script type="text/javascript" src="js/shadowbox.js"></script>
</head>

<script type="text/javascript">
$(document).ready(function(){
 $('#aparecer').click(function(){
 $('#opcoes').slideDown('slow')
 opcoes.style.display="block";
 buscar.style.display="none";
 });
});
function retirarMenu(){
	buscar.style.display="block";
	opcoes.style.display="none";
}

// Aqui você define os players..

Shadowbox.init({

players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']

});
</script>

<body topmargin="0" leftmargin="0" rightmargin="0">
<div id="estrutura_topo">
<div id="topo">
<div id="cabecalho">
 <img src="logo.jpg" width="1000" height="200"/>
</div>
<div id="menu">
<img src="imagens/menu.jpg" width="1000" height="78"/>
</div>

</div>
</div>

<div id="buscar">
<form name="pesquisar" method="post" action="">
 <p>Pesquisar:
 <input name="buscar" type="text" id="pesquisar" size="35">
 <label>
 <input type="submit" name="ok" id="ok" value="Buscar">
 </label>
 <a href="javascript:;" id="aparecer">Mais opções</a></p>
</form>
 </div>

<div id="opcoes">
<form name="pesquisar" method="post" action="">
 <p>Pesquisar:
 <input name="buscar" type="text" id="pesquisar" size="35">
 <label>
 <input type="submit" name="ok" id="ok" value="Buscar">
 </label>
 <label>
 <select name="onde" id="onde">
 <option value="teste" selected>Teste</option>
 <option value="teste">teste</option>
 <option value="teste">teste</option>
 <option value="teste">teste</option>
 </select>
 </label>
 <a href="javascript:;" onClick="retirarMenu()">Menos opções</a>
 <br>
 <label>
 <input name="site" type="radio" value="site" checked align="absbottom">
 No site
 <input name="google" type="radio" value="google" align="absbottom">
 No google
 </label>
 </p>
</form>
</div>

<div id="propaganda">
<div class="bordaBox">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="conteudo">
<script type="text/javascript"><!--
google_ad_client = "pub-3984000644076850";

/ norma borges 2010 /

google_ad_slot = "3846042158";
google_ad_width = 728;
google_ad_height = 90;

//--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
</div>

<div id="conteudo">
<div class="encima"></div>
<div class="conteudo3">
 <p>Conteudo</p>
 <p><a href="www.google.com" rel="shadowbox[nome da galeria]" title="Cadastre-se">Teste</a> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
</div>
 <div class="embaixo"></div>
</div>

<div id="menu_vertical">
<div class="encima_menu"></div>
<div class="conteudo2">
 <div id="membro">
 <div id="foto" align="center">
 <div class="titulos" align="left"><img src="imagens/membros.gif" width="271" height="32" align="absbottom"/></div>
 <form name="logar" method="POST" action="<?php echo $loginFormAction; ?>">
 <p align="center"><strong>Usuário:
 </strong>
 <p align="center">
 <label>
 <input type="text" name="usuario" id="usuario">
 </label>
 </p>
 <p align="center"><strong>Senha:
 </strong>
 <p align="center">
 <label>
 <input type="text" name="senha" id="senha">
 </label>
 <br>
 <a href="usuarios/esqueci.php">Esqueci minha senha</a>
 <p align="center">
 <label>
 <input type="submit" name="login" id="login" value="Entrar">
 </label>
 </p>
 </form>
 </div>
 </div>
<div class="menu_membro" align="center">
<div class="titulos" align="left"><img src="imagens/menu.gif" width="277" height="32" align="absbottom"/></div>
 <p>Inicio</p>
 <p>Galeria de fotos</p>
 <p>Vídeos</p>
 <p>Fale conosco</p>
 <p>Contato</p>
</div>
</div>
<div class="menu_membro" align="center">
<div class="titulos" align="center"><img src="imagens/duvidas.gif" width="277" height="32" align="absbottom"/></div>
 <a href="duvidas.php">
 <p>Como me cadastro?</p>
 <p>Não consigo comentar nas fotos</p>
 <p>Não consigo comentar nos vídeos</p>
 <p>Não consigo logar-me</p>
 <p>Esqueci minha senha. E agora?</p>
 <p><strong>Outras dúvidas</strong></p>
 </a>
 </div>
 <div class="embaixo_menu"></div>
</div>

</body>
</html>

fiz tudo e continua nao funcionando...

mas de qualquer forma muito obrigado

responde ae por favor

Kakashi_Hatake· 25 de dez.

Cara, a tua aplicação de css em jquery está assim:

<script type="text/javascript">
$(document).ready(function(){
 $('#aparecer').click(function(){
 $('#opcoes').slideDown('slow')
 opcoes.style.display="block";
 buscar.style.display="none";
 });
});
function retirarMenu(){
 buscar.style.display="block";
 opcoes.style.display="none";
}
</script>

Tenta assim, pois em javascript se aplica de uma forma e em jquery é de outra:

<script type="text/javascript">
$(document).ready(function(){
 $('#aparecer').click(function(){
 $('#opcoes').slideDown('slow').css({display:'block'});
 $('#buscar').css({display:'none'});
 })
	(function retirarMenu(){
 $('#buscar').css({display:'block'});
 $('#opcoes').css({display:'none'});
	})
});
</script>

guih_oliveira10· 25 de dez.

valeu vou tentar e te falo muito obrigado

guih_oliveira10· 27 de dez.

valeu gente funcionou certinho agora