Fechar Pop Up automaticamente após x segundos?

5 de março de 2016 24 respostas

BrunaMarinho 5 de março de 2016

Olá para todos, sou nova aqui e estou prescisando de ajuda de vocês, meu amigo me deu um pop up personalisado (widget do facebook) que abre junto com meu blog (Blogger), e aparece uma vez só para a pessoa, mas gostaria que o pop up fechasse automaticamente após 5 segundos, sem que o visitante tenha que confirmar nada, já tentei muitos códigos, mas o mais perto que cheguei foi um código que fecha o pop up, mas fecha também minha página do blog junto, aí não adianta né… rsrs. Por favor me ajudem, não entendo desses códigos e estou a dias procurando… quase desistindo aff. Muito obrigado a todos.

Segue o cógio inteiro do meu pop up:

#lightbox { background-color: #000; float: left; height: 100%; opacity: 0.9; -moz-opacity: 0.90; filter: alpha(opacity=90); position: fixed; width: 100%; z-index:998; } #lightboxContent { background-image: url("https://3.bp.blogspot.com/-xw8mm2DYpyk/VtndWWX3hDI/AAAAAAAAHJ0/SK-IzSJqGM4/s1600/script%2Bfacebook.png"); background-repeat:no-repeat; margin: 0 auto; opacity: 997; padding-top: 43px; width: 331px; height: 343px; z-index:999; cursor:pointer; margin-left: -157px; /* metade da largura */ margin-top: -145px; /* metade da altura */ position: fixed; top: 60%; left: 50%; text-align: center; } #fechar { z-index:10; }

24 Respostas

Victorhgn2011 5 de mar. de 2016

O codigo não esta aparecendo

BrunaMarinho 5 de mar. de 2016

Olá amiguinho, que bom uma alma caridosa rsrs… eu ponho o código e ele não aparece na visualização, mas ele tá lá… Como eu faço pra vc enxergar o código? tem algum macete? Não pode por junto com o meu texto normal? Muito obrigado viu Victor.

Victorhgn2011 5 de mar. de 2016

É so você copiar seu codigo e colar aqui mesmo na hora de comentar

BrunaMarinho 5 de mar. de 2016

Pois é amigo, agradeço sua atenção, mas copio o código no editar e ele aparece, mas na visualização só aparece o que estou comentando, o código não aparece mesmo… Tem que por entre aspas, parenteses, ou algo do tipo será? Obrigado…

BrunaMarinho 5 de mar. de 2016

Mas é assim, preciso que meu popup feche sozinho depois dde x segundos, mas também me serviria atualizar (1 vez só) meu blog (blogger) uns 5 segundos depois que a pessoa entrar. Obrigado.

Victorhgn2011 5 de mar. de 2016

Voce sabe qual a linguagem de programação usada tipo “php,html,javascript etc”.Você pode botar o arquivo do codigo fonte na nuvem e botar o link aqui pra alguem dar uma olhada.

BrunaMarinho 5 de mar. de 2016

Olha Victor, no script tem JQuery, javascrip, etc… esse script está num widget no blogger, mas eu achei um código que conseguiu fazer o que eu queria, que é atualizar a pagina uma vez só quando a pessoa entra no blog, pra o pop up sumir, ele está abaixo…

script
window.onload = function() { if(!window.location.hash) { window.location = window.location + ‘#loaded’; window.location.reload(); } }
/script

Eu não coloquei os <> na abertura e fechamento do codigo script se não ele some, igual te falei…

Coloquei ele no final do meu script do pop up no widget e funcionou…

Mas tem um problema, ele está fechando muito rápido, não dá tempo nem do pop up carregar direito e já some por causa que a página atualiza… tem como por pra fechar depois de uns 5 segundos depois que ele abrir?

To te enchendo né amigo rsrs… desculpa mas isso me ajudaria a deixar exatamente como eu queria…

Muito obrigado de novo

wldomiciano 6 de mar. de 2016

Qual o endereço do seu blog e o nome do widget em que este código está?

BrunaMarinho 6 de mar. de 2016

Olá amigo, boa tarde…

Obrigado por estar me ajudando viu…

o blog é www.receitassaborosasdemais.com e o nome no widget é POPUPFB, eu deixo esse widget sem nome pra ficar invisível, mas coloquei esse nome pra vc poder encontrá-lo.

Muito obrigado amigo.

BrunaMarinho 6 de mar. de 2016

Olá novamente, conforme nosso amigo Victorhgn2011 deu a ideia, pedi pra o meu primo colocar o codigo na nuvem pra vcs entenderem melhor. No final do código do popup estou explicando as duas opções que tentei, mas não está como eu queria. O txt ta no link abaixo.

https://mega.nz/#!JsNjAbZL!TkgsnUQgjV7uRueAcB-U2scSTukXtRjlDoHrucQhPrk

Gente, muito obrigado por estrem me ajudando.

wldomiciano 6 de mar. de 2016

Sabe as opções que usou para solucionar seu problema?

Tira elas, deixa só o código do popup, porque realmente ele nem chega a abrir pra gente poder ver.

Se quiser evitar qualquer risco de bagunçar seu blog, poderia criar um blog de testes com o mesmo template e tudo pra fazer essas modificações.

No momento a solução que pensei seria a que eu chamo de OPÇÃO 3:

<script>
    setTimeout( function() {
        document.getElementByID('lightboxContent').style.display = "none";
    }, 5000 );
</script>

Remova os códigos que adicionou anteriormente e tente a OPÇÃO 3. Se não funcionar como esperado, remova todas as opções pro pessoal poder visualizar melhor o problema.

BrunaMarinho 6 de mar. de 2016

Olá wldomiciano, coloquei seu código no final do popup e não funcionou… ele abre mas não fecha depois dos 5 segundos… fica aberto, vou chorar rsrsrs.

Meu primo fez um blog de teste pra mim… e to testando por lá, igual você aconselhou…

http://brunamarinhoteste.blogspot.com.br/

Eu mudei o código do popup “display:none” para “display:inline”, para não ter que limpar o cachê toda hora pra poder ver o popup, é só atualizar que ele aparece de novo, uma vez que ele é configurado pra aparecer uma vez só por visitante, atrapalha alguma coisa isso?

Obrigado de novo rsrsrs

wldomiciano 6 de mar. de 2016

Que pena que não funcionou, vou dar mais uma olhada. Só um problema no blog, ele tá fechado pra leitores convidados.

BrunaMarinho 6 de mar. de 2016

Obrigada mesmo assim, meu primo já arrumou o blog pra público ta… se puder, espero ansiosa rsrs… Grata.

wldomiciano 6 de mar. de 2016

Tive outra idéia. Procure por essa linha no seu widget:

$q("#lightbox, #lightboxContent").hide();

Bem abaixo dela cole isso:

setTimeout( function() { $q("#lightbox, #lightboxContent").hide(); }, 5000 );

Tô rezando aqui por você! rs.

BrunaMarinho 6 de mar. de 2016

kkkkk Olha wldomiciano, só com reza brava mesmo… num funcionou querido, o popup aparece mas não some automático, a não ser que eu clique em fechar no X aí ele some… Deixei ele ativado no blog-teste pra vc dar uma olhada, se for possível. Obrigada pelo empenho em me ajudar.

http://brunamarinhoteste.blogspot.com.br/

wldomiciano 6 de mar. de 2016

Vish, tá difícil!

A única coisa em que consigo pensar agora é em você ir no Editor HTML do Blogger (no de teste mesmo), copiar todo o código e compartilhar aqui pra eu testar no meu próprio blog. Eu bem tentei copiar só o código do widget problemático e colocar no meu site, mas o popup não abriu não sei por quê.

BrunaMarinho 7 de mar. de 2016

Ta, eu excluo o widget e colo o código do widget aonde no html?

BrunaMarinho 7 de mar. de 2016

Desculpa, entendi o que quis dizer, vou faze… obrigada

BrunaMarinho 7 de mar. de 2016

Nossa… finalmente aprendi como poe o código aqui… desculpem minha burrice rsrsrs
Este é o código original do popup que eu estou colocando no widget do blog (blogger)… ele abre mas não fecha sozinho, tem que clicar no X, preciso que ele feche 5 segundos depois que ele abriu pela primeira vez… pois no código tem cookie que ele não abre mais para o mesmo visitante quando é fechado, pra não irritar o visitante…tem como?

Muitíssimo obrigado pelo esforço de vocês!

<script src='http://yourjavascript.com/[telefone removido]/jquery-min.js'></script>
<script src="http://yourjavascript.com/[telefone removido]/jquery-colorbox-min.js"></script>
<script type="text/javascript">
function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*2*60*60*1000));        
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {
    createCookie(name,"",-1);
}
jQuery(document).ready(function() {
    var visited = readCookie('visited');
    if (!visited || visited !== "true") {
        createCookie('visited', "true", 1);
        $.colorbox({width:"400px", inline:true, href:"#subscribe"});
    }
});
</script>
<script type="text/javascript" src="http://yourjavascript.com/[telefone removido]/google-jquery-min.js"></script>
<script type="text/javascript">
// JavaScript Document
 var $q = jQuery.noConflict();
$q(document).ready(function()
{
$q("#lightbox, #lightboxContent").click(function(){
$q("#lightbox, #lightboxContent").hide();
})});
</script>
<style type="text/css">
#lightbox {
    background-color: #000;
    float: left;
    height: 100%;
    opacity: 0.9;
    -moz-opacity: 0.90;
    filter: alpha(opacity=90);
    position: fixed;
    width: 100%;
	z-index:998;    
}   
 
#lightboxContent {
    background-image: url("https://3.bp.blogspot.com/-xw8mm2DYpyk/VtndWWX3hDI/AAAAAAAAHJ0/SK-IzSJqGM4/s1600/script%2Bfacebook.png");
	background-repeat:no-repeat;
    margin: 0 auto;
    opacity: 997;
    padding-top: 43px;
    width: 331px;
    height: 343px;
    z-index:999;
    cursor:pointer;
    margin-left: -157px; /* metade da largura */
    margin-top: -145px; /* metade da altura */
    position: fixed;
    top: 60%;
    left: 50%;
    text-align: center;
}
#fechar {
z-index:10;
}
</style>
<style type="text/css">
<!--
#curtir {
z-index:998;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
if (document.all){}
else document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=mouse;
function mouse(e)
{
if (navigator.appName == 'Netscape'){
xcurs = e.pageX;
ycurs = e.pageY;
} else {
xcurs = event.clientX;
ycurs = event.clientY;
}
document.getElementById('position').style.left = (xcurs-150)+'px';
document.getElementById('position').style.top = (ycurs-125)+'px';
}
</script>
<style type="text/css">
<!--
#position {
position: absolute;
z-index:999999;
filter:alpha(opacity=0); 
opacity:0.0;
}
-->
</style>
<div style='display:inline' mobile='no'>
<div id='subscribe' mobile='no'>
<div id="position">
<div id="samuellins">
</div>
</div>
<div id="lightbox"></div>
<div id="lightboxContent"><div id="curtir"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Freceitassaborosasdemais/?ref=tn_tnmn1&amp;width=315&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=290" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:315px; height:290px;" allowtransparency="true" onclick="document.getElementByID('lightboxContent').style.display='none';"></iframe><div id="fechar" onclick="document.getElementByID('lightboxContent').style.display='none';"><b></b></div></div></div>
</div></div>

wldomiciano 7 de mar. de 2016 1 like

KKK… Eu quis dizer pra compartilhar TODO o código do seu template de teste, mas tudo bem, tentei criar um widget aqui com o código que passou agora e o popup abriu e eu consegui algum resultado, vamos ver se vai funcionar ai.

O que eu fiz foi pegar o código que você mostrou e adicionar ao final dele a seguinte linha:

<script>setTimeout( function() { $q("#lightbox, #lightboxContent").hide(); }, 5000 );</script>

O código completo ficou assim, teste e veja se dá resultado.

<script src='http://yourjavascript.com/[telefone removido]/jquery-min.js'></script>
<script src="http://yourjavascript.com/[telefone removido]/jquery-colorbox-min.js"></script>
<script type="text/javascript">
function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*2*60*60*1000));        
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {
    createCookie(name,"",-1);
}
jQuery(document).ready(function() {
    var visited = readCookie('visited');
    if (!visited || visited !== "true") {
        createCookie('visited', "true", 1);
        $.colorbox({width:"400px", inline:true, href:"#subscribe"});
    }
});
</script>
<script type="text/javascript" src="http://yourjavascript.com/[telefone removido]/google-jquery-min.js"></script>
<script type="text/javascript">
// JavaScript Document
 var $q = jQuery.noConflict();
$q(document).ready(function()
{
$q("#lightbox, #lightboxContent").click(function(){
$q("#lightbox, #lightboxContent").hide();
})});
</script>
<style type="text/css">
#lightbox {
    background-color: #000;
    float: left;
    height: 100%;
    opacity: 0.9;
    -moz-opacity: 0.90;
    filter: alpha(opacity=90);
    position: fixed;
    width: 100%;
	z-index:998;    
}   
 
#lightboxContent {
    background-image: url("https://3.bp.blogspot.com/-xw8mm2DYpyk/VtndWWX3hDI/AAAAAAAAHJ0/SK-IzSJqGM4/s1600/script%2Bfacebook.png");
	background-repeat:no-repeat;
    margin: 0 auto;
    opacity: 997;
    padding-top: 43px;
    width: 331px;
    height: 343px;
    z-index:999;
    cursor:pointer;
    margin-left: -157px; /* metade da largura */
    margin-top: -145px; /* metade da altura */
    position: fixed;
    top: 60%;
    left: 50%;
    text-align: center;
}
#fechar {
z-index:10;
}
</style>
<style type="text/css">
<!--
#curtir {
z-index:998;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
if (document.all){}
else document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=mouse;
function mouse(e)
{
if (navigator.appName == 'Netscape'){
xcurs = e.pageX;
ycurs = e.pageY;
} else {
xcurs = event.clientX;
ycurs = event.clientY;
}
document.getElementById('position').style.left = (xcurs-150)+'px';
document.getElementById('position').style.top = (ycurs-125)+'px';
}
</script>
<style type="text/css">
<!--
#position {
position: absolute;
z-index:999999;
filter:alpha(opacity=0); 
opacity:0.0;
}
-->
</style>
<div style='display:inline' mobile='no'>
<div id='subscribe' mobile='no'>
<div id="position">
<div id="samuellins">
</div>
</div>
<div id="lightbox"></div>
<div id="lightboxContent"><div id="curtir"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Freceitassaborosasdemais/?ref=tn_tnmn1&amp;width=315&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=290" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:315px; height:290px;" allowtransparency="true" onclick="document.getElementByID('lightboxContent').style.display='none';"></iframe><div id="fechar" onclick="document.getElementByID('lightboxContent').style.display='none';"><b></b></div></div></div>
</div></div>

<script>setTimeout( function() { $q("#lightbox, #lightboxContent").hide(); }, 5000 );</script>

BrunaMarinho 7 de mar. de 2016

wldomiciano, mocinho você é gênio, nem sei como agradecer sua boa vontade em me ajudar, já estava desistindo rsrsrs. Ficou exatamente o que eu queria… Parabéns mesmo… você tem muito talento e futuro assim… como posso te qualificar aqui no fórum para os membros saberem como você é ótimo? Muito obrigada. Beijos.

wldomiciano 7 de mar. de 2016 1 like

EEEEE… Toca aqui \o

Rs… Esta parte do GUJ não tem esquema de pontuação ou coisa do tipo, mas você pode selecionar minha resposta como solução do seu problema. Deve ter um ícone em algum lugar pra fazer isso.

Obrigado. Sucesso com seu blog.

BrunaMarinho 7 de mar. de 2016 1 like

Pode deixar comigo wldomiciano, nem que eu tenha que falar com os moderadores… Gostaria também de agradecer o Victorhgn2011, que também se preocupou em me ajudar com esse problema.
Muitíssimo obrigada mais uma vez. Beijos e sucesso pra você!

Ah… esse fórum do GUJ está de parabéns!

Criado 5 de março de 2016

Ultima resposta 7 de mar. de 2016

Respostas 24

Participantes 3

24 Respostas

Topicos relacionados