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.
Carregando comentários...