Ir para conteúdo

POWERED BY:

Arquivado

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

guih_oliveira10

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

Por , em Javascript

Recommended Posts

guih_oliveira10    1

guih_oliveira10
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Layo    10

Layo
Postado

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/

Compartilhar este post

Link para o post
Compartilhar em outros sites

guih_oliveira10    1

guih_oliveira10
Postado 

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<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"></script>
<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" 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:

 

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

depois o link:

 

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

 

nao funfou

Compartilhar este post

Link para o post
Compartilhar em outros sites

Layo    10

Layo
Postado

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

 

<a href="www.google.com" rel="shadowbox[nome da galeria]" title="Cadastre-se"></a>

Compartilhar este post

Link para o post
Compartilhar em outros sites

guih_oliveira10    1

guih_oliveira10
Postado 

<?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"><head>
<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"></script>
<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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kakashi_Hatake    267

Kakashi_Hatake
Postado

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>

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