onmouseout não funciona em determinada página
Estou fazendo um popup que abre quando o usuário vai sair da página, para isso usei o evento onmouseout="" na tag body.
Na minha página teste funciona perfeitamente, o código dela está abaixo.
Porém, quando coloco o mesmo código na página teste do cliente, o onmouseout não funciona corretamente. Ele está executando a função ao mover o mouse dentro da página e não para fora como deveria ser. Penso que talvez tenha algum conflito na página ou algo assim, mas não achei o erro. A página é essa: https://www.enlevolar.com.br/home-teste-popup
E o código é esse, que funciona na página teste mas fica bugado na página do cliente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function abrepopup() {
if ((!window.localStorage.getItem("popup-exibida"))&&(!window.sessionStorage.getItem("popup-session")))
{
document.getElementById("popup").style.display="block";
document.getElementsByTagName("body")[0].removeAttribute("onmouseout");
window.sessionStorage.setItem("popup-session", "1");
}
};
function fechapopup() {
document.getElementById("popup").style.display="none";
document.getElementsByTagName("body")[0].removeAttribute("style");
};
function troca2() {
document.getElementById("caixa-popup1").style.display="none";
document.getElementById("caixa-popup2").style.display="block";
};
var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
function setCodigoLinha(linha) {
if(linha == 1)
{
document.getElementById("codigo-desconto-popup").value="1primeiraCompra";
document.getElementById("link-linha-popup").href="/produto/listar/Cama";
document.getElementById("img-linha-popup").src="//d8vlg9z1oftyc.cloudfront.net/garmisch/image/media/COBRE%20LEITO%20REQUINTE%20COR%201_56154fbf778be.jpg";
document.getElementById("nome-linha-popup").value="Linha Cama";
}
else if(linha == 2)
{
document.getElementById("codigo-desconto-popup").value="2primeiraCompra";
document.getElementById("link-linha-popup").href="/produto/listar/Banho";
document.getElementById("img-linha-popup").src="//d8vlg9z1oftyc.cloudfront.net/garmisch/image/media/Valencia_DAN0241_5615502a74c18.jpg";
document.getElementById("nome-linha-popup").value="Linha Banho";
}
if(!filter.test(document.getElementById("email-desconto-popup").value))
{
document.getElementById("escolha-a-linha-erro").innerHTML="Insira um e-mail válido para ganhar o desconto!";
}
else
{
document.getElementById("caixa-popup2").style.display="none";
document.getElementById("caixa-popup3").style.display="block";
/*window.localStorage.setItem("popup-exibida", "1");*/
}
};
</script>
<style>
#popup{background-color: rgba(0,0,0,0.5); width: 100%; height: 100%; position: fixed; z-index: 10000; overflow: auto;}
.caixa-popup{background-color: #fff; width: 700px; height: auto; margin-top: 10% !important; margin: auto; text-align: center; padding: 3%;}
@media(max-width: 700px){
.caixa-popup{width: 100%;}
}
.caixa-popup .titulo{padding-bottom: 4%; border-bottom: 1px solid rgba(0,0,0,0.3); display: block; margin-bottom: 4%;}
.caixa-popup #fechapop{float: right; z-index: 1; cursor:pointer;}
.caixa-popup h1, .caixa-popup p{margin: 2% 7%;}
.caixa-popup input[type="button"]{width: 30%; margin:5% 5% 2% 5%; background: #722b2b; color:#fff; padding: 3% 0;}
.caixa-popup input[type="button"]:hover, {opacity: 0.95;}
.caixa-popup .button-semdestaque{background: #fff !important; color: #595959 !important;}
.caixa-popup .p-option{width: 30%; text-align: center; display:inline;}
.caixa-popup .newsletter input[type="radio"]{display: inline; height: auto; width: auto; padding: 1%; -webkit-appearance: radio; min-height: auto; margin: 2% 1%;}
.caixa-popup .quero-meu-desconto{position: relative; width: 40%; margin: 2%; background: #722b2b; color:#fff; padding: 3% 1%;}
.caixa-popup #img-linha-popup, .caixa-popup #nome-linha-popup{width: 50%; margin: 0 auto; border: 1px solid #722b2b; background-color: #fff; color: #722b2b; font-size: 1.3em;}
.caixa-popup #email-desconto-popup{width: 85%;}
.caixa-popup #codigo-desconto-popup{max-width: 100%; background: #722b2b; text-align: center; border: none;margin-top: 2%; color: #fff; cursor:text;}
@media(max-width: 500px){
.caixa-popup .p-option{margin: 2% 5%; display: inline-block;}
}
</style>
</head>
<body onmouseout="abrepopup()" style="height: 1000px;">
<div id="container">
<div id="popup" style="display: none;">
<div id="caixa-popup1" class="caixa-popup" style="display: block;">
<div id="fechapop" onclick="fechapopup()">X</div>
<h3 class="titulo">Você quer</h3>
<h1 class="titulo"> GANHAR <strong>R$10</strong> DE DESCONTO<br><span>em sua primeira compra?</span></h1>
<input type="button" value="SIM" onclick="troca2()" style="font-size: 1.6em;">
<input type="button" class="button-semdestaque" value="NÃO" onclick="fechapopup()"><br>
<p class="p-option">Quero ganhar o desconto!</p> <p class="p-option">Não gosto de descontos.</p>
</div>
<div id="caixa-popup2" class="caixa-popup" style="display: none;">
<div id="fechapop" onclick="fechapopup()">X</div>
<h3 class="titulo">Informe seu e-mail e</h3>
<h1>ESCOLHA UMA LINHA PARA GANHAR O DESCONTO</h1>
<p class="titulo">Além de ganhar um desconto exclusivo, você ainda vai receber todas as nossas novidades e promoções em seu e-mail!</p>
<div class="newsletter relative color_default button_in_input">
<input id="email-desconto-popup" type="email" placeholder="Seu e-mail" class="flexy-newsletter-email w_full fs_medium fw_light error form-control" required="">
<div class="message_container_subscribe d_none m_top_20"></div>
<button class="flexy-newsletter-sigin quero-meu-desconto" onclick="setCodigoLinha(1)">Quero Desconto na Linha Cama</button>
<button class="flexy-newsletter-sigin quero-meu-desconto" onclick="setCodigoLinha(2)">Quero Desconto na Linha Banho</button>
</div>
<p id="escolha-a-linha-erro" style="color: #722b2b;"></p>
</div>
<div id="caixa-popup3" class="caixa-popup" style="display: none;">
<div id="fechapop" onclick="fechapopup()">X</div>
<h1>
<span>Seu código de desconto é<br>
<input type="text" id="codigo-desconto-popup" name="codigodesc" value="codigodesc" disabled="disable"></span>
</h1>
<p class="titulo">Insira este código no checkout para ganhar o desconto!</p>
<h2 style="margin: 2%;">Clique para Comprar Agora:</h2>
<a id="link-linha-popup" href=""><img id="img-linha-popup" src=""><br><input type="button" id="nome-linha-popup" value=""></a>
<p onclick="fechapopup()" style="color: #722b2b; cursor: pointer; margin-top: 5%;">ou<br>Continue no site</p>
</div>
</div>
</div>
<div style="height: 200%; background: red;"></div>
</body>
</html>Discussão (1)
Carregando comentários...