0

Criei um popup, mas agora o cliente quer que ele fique piscando até ser fechado. Só informando que é uma imagem JPEG que abre na tela.

1

3 Respostas 3

14

O infógrafo abaixo demonstra o quanto o uso dessa técnica para chamar atenção é elegante, agradável, e recomendado nos papers escritos sobre experiência de usuário e design de interfaces:

Satan Mouse

Se você já negociou sua alma imortal com o Satanás e não vê problemas em seguir adiante, você tem duas formas de proceder:

Forma maldita 1:

Essa forma só funciona se o popup estiver no mesmo domínio da aba ou janela que o abre. Na página principal, utilize o seguinte código:

var janelaParaOInferno = window.open(url);
setInterval(function () { janelaParaOInferno.focus() }, 300);

Forma maldita 2:

No popup, inclua o seguinte código:

var LuciferEhMeuSenhor = function () {
    window.blur();
    window.focus();
}

setInterval(LuciferEhMeuSenhor, 300);

Aviso aos acólitos

Os anjos do bem têm trabalhado para que gambiarras como essas não sejam capazes de afetar os inocentes. Há anos elas não funcionam no Chrome, por exemplo. Essas coisas do mal só funcionarão no ambiente de empresas que não permitem que seus funcionários utilizem navegadores e sistemas operacionais modernos. Se o seu empregador acorrenta as almas torturadas ao IE8, vá em frente... Caso contrário você está abandonado à própria sorte.

3
  • 5
    +666 Excelente. Commented 26/09/2017 às 22:30
  • 7
    +1 Recomendo usar fonte ComicSans para ganhar pontos extras com o Senhor das Trevas.
    – Zulian
    Commented 27/09/2017 às 14:17
  • 2
    Pra complementar, coloca um 'alert' disparado com 'onbeforeunload' dentro dessa janela aberta pra terem certeza que querem sair da página. Commented 28/09/2017 às 18:00
1

Com o código abaixo você consegue um efeito em JavaScript que faz o elemento ficar como se estivesse piscando:

var piscando = document.getElementById('id_do_elemento');
var interval = window.setInterval(function(){
    if(piscando.style.visibility == 'hidden'){
        piscando.style.visibility = 'visible';
    }else{
        piscando.style.visibility = 'hidden';
    }
}, 700);

var piscando = document.getElementById('id_do_elemento');
var interval = window.setInterval(function(){
    if(piscando.style.visibility == 'hidden'){
        piscando.style.visibility = 'visible';
    }else{
        piscando.style.visibility = 'hidden';
    }
}, 700);
<img id="id_do_elemento" height="100" src="https://media.apnarm.net.au/media/images/2016/11/22/b88450493z1_20161122153435_000g7odij2q50-0-z20cq7ifsjegh26w9n2_t620.jpg" />

2
  • Desculpe a minha ignorância, mas como não entendo muito de javascript onde uso esse código? num arquivo .js ou entre as tags <script type="text/javascript"> </script> Commented 27/09/2017 às 0:20
  • @EzequielSoares Você coloca o código na função que abre o popup.
    – Sam
    Commented 27/09/2017 às 1:00
-1

Uma forma bem simples e abrir um GIF animado no lugar do Jpeg. Você pode criar com alguns aplicativos, ou até mesmo em alguns sites. Exemplo:

http://www.apptuts.com.br/tutorial/web/sites-para-criar-gifs-animados/

Se preferir, você pode criar uma função javascript para alterar a imagem ou cor do fundo. Como no exemplo a seguir.

setInterval(function(){blink()}, 1000);


function blink() {
        $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0);
}
#boxOfTheHell {
  Background:#ff0000;
  color:#00ff00;
  width:200px;
  height:200px;
  padding:15px;
  font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxOfTheHell">
  Exemplo pisca pisca.
</div>

4
  • Tenho assim: <link rel="stylesheet" type="text/css" href="popup/css/popup.css"> <script type="text/javascript" src="popup/js/popup.js"></script> Commented 26/09/2017 às 22:08
  • window.onload = function() { // open a welcome message as soon as the window loads Shadowbox.open({ content: '<div align="center"><a onclick="Shadowbox.close()"><iframe allowtransparency="true" width="510" height="500" frameborder="0" src="acesse.html" marginheight="0" marginwidth="0"></iframe></a></div>', player: "html", title: "", height: 500, width: 510 }); }; </script> Commented 26/09/2017 às 22:10
  • Se for mais fácil? Como posso criar um gif que a imagem apaga e acende Commented 26/09/2017 às 22:11

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .