Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
olá pessoal
venho aqui pedir a ajuda de vocês para um script que estou desenvolvendo, onde eu tenho link com o atributo name, e quando eu clico nesses links o jquery exibe uma DIV que contem a opacidade, e outra com o conteúdo, além de exibir um carregando.
para entenderem melhor olhem o script.
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pato Faminto | Home</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/overlays.css" type="text/css" />
<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript" src="js/eventos.js"></script>
</head>
<body>
<div id="opacidade">
<img src="imagens/load.gif" />
</div><!--opacidade-->
<div id="overlay_email" class="overlays"></div><!--overlay_email-->
<div id="overlay_login" class="overlays"></div><!--overlay_login-->
<div id="overlay_cadastro" class="overlays"></div><!--overlay_cadastro-->
<div id="overlay_lembrar" class="overlays"></div><!--overlay_cadastro-->
<div id="links-topo">
<a href="membros/login.php" name="login"><b>Login</b></a>
<span><b> |</b></span>
<a href="membros/cadastro.php" name="cadastrar"><b>Cadastro</b></a>
<span><b> |</b></span>
<a href="membros/lembrar_senha.php" name="lembrar"><b>Lembrar senha</b></a>
</div><!--links-topo-->
</body>
</html>o eventos.js:
// Documento JavaScript Pato Faminto
// Eventos
$(document).ready(function(){
// Exibir Box Email
if($.cookie('ofertasEmail') != 1){
setTimeout(function(){
if($("#overlay_login").css('display') == 'none' && $("#overlay_cadastro").css('display') == 'none' && $("#overlay_lembrar").css('display') == 'none'){
$("#opacidade").fadeIn('slow');
$("#overlay_email").load('overlay_email.html');
$("#overlay_email").ajaxStop(function(){
$(this).fadeIn('slow');
$.cookie('ofertasEmail',1,{expires: 7});
});
}
return false;
},8000);
}// Exibir Box Login
$("a[name=login]").click(function(){
if($("#overlay_email").css('display') == 'none' && $("#overlay_cadastro").css('display') == 'none' && $("#overlay_lembrar").css('display') == 'none'){
$("#opacidade").fadeIn('slow');
$("#overlay_login").load('overlay_login.php');
$("#overlay_login").ajaxStop(function(){
$(this).fadeIn('slow');
});
}
return false;
});// Exibir Box Cadastro
$("a[name=cadastrar]").click(function(){
if($("#overlay_email").css('display') == 'none' && $("#overlay_login").css('display') == 'none' && $("#overlay_lembrar").css('display') == 'none'){
$("#opacidade").fadeIn('slow');
$("#overlay_cadastro").load('overlay_cadastro.html');
$("#overlay_cadastro").ajaxStop(function(){
$(this).fadeIn('slow');
});
}
return false;
});// Exibir Box Lembrar senha
$("a[name=lembrar]").click(function(){
if($("#overlay_email").css('display') == 'none' && $("#overlay_login").css('display') == 'none' && $("#overlay_cadastro").css('display') == 'none'){
$("#opacidade").fadeIn('slow');
$("#overlay_lembrar").load('overlay_lembrar.html');
$("#overlay_lembrar").ajaxStop(function(){
$(this).fadeIn('slow');
});
}
return false;
});// Ocultar Box Email
$("#overlay_email a").live('click',function(){
$("#opacidade").fadeOut('slow');
$("#overlay_email").fadeOut('slow');
$("#overlay_email").hide();
return false;
});// Ocultar Box Login
$("#overlay_login a").live('click',function(){
$("#opacidade").fadeOut('slow');
$("#overlay_login").fadeOut('slow');
$("#overlay_login").hide();
return false;
});// Ocultar Box Cadastro
$("#overlay_cadastro a").live('click',function(){
$("#opacidade").fadeOut('slow');
$("#overlay_cadastro").fadeOut('slow');
$("#overlay_cadastro").hide();
return false;
});// Ocultar Box Lembrar senha
$("#overlay_lembrar a").live('click',function(){
$("#opacidade").fadeOut('slow');
$("#overlay_lembrar").fadeOut('slow');
$("#overlay_lembrar").css('display','none');
return false;
});
// Define a div Opacidade com altura máxina;
var height = $("body").css('height');
$("#opacidade").css('height',height);
});o overlay.css
/ CSS OVERLAY /
.overlays{
width:600px;
height:430px;
display:none;
background:#FFF;
border:1px solid #CCC;
position:absolute;
left:50%;
top:50%;
margin:-215px 0 0 -300px;
z-index:3;
}position:relative;
top:-8px;
left:590px;
text-decoration:none;
}
#opacidade{
width:100%;
display:none;
background:#000;
opacity:0.8;
-webkit-opacity:0.8;
-moz-opacity:0.8;
position:absolute;
z-index:2;
}position:absolute;
top:18%;
left:50%;
margin:-8px 0 0 -8px;
}aqui vai um dos arquivos que são carregados quando clico, todos são iguais so muda o texto (overlay_email.html):
<a href="javascript:;">
<img src="imagens/close_overlay.png" />
</a>
<span>Aqui virá o codigo para cadastrar email de ofertas!</span>o problema é so seguinte: quando eu clico em algum desses link pela primeira vez, exibe normal, quando eu fecho também fecha normal, agora quando eu clico em qualquer link pela segunda vez, ele exibe a DIV que ele tem que exibir, mais a DIV anterior que tinha sido fechada também é exibida causando um bug no meu script.
acho que assim deu pra entender.
obrigado amigo
vou postar no lugar certo agora
vlw
opa amigo, aqui eh sobre Java, tem forum de Javascript, talvez la você encontre mais ajuda sobre o assunto!