How to create a popup that keeps blinking on the screen?

Question

I created a popup, but now the client wants it to blink until it is closed. Just stating that it is a JPEG image that opens on the screen.

Answer 1

The infograph below shows how much the use of this technique to draw attention is elegant, pleasurable, and recommended in papers writings on user experience and interface design:

If you have already negotiated your immortal soul with Satan and see no problem moving forward, you have two ways to proceed:

Cursed form 1:

This form only works if the popup is in the same domain as the tab or window that opens it. On the main page, use the following code:

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

Damn form 2:

In the popup, include the following code:

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

setInterval(LuciferEhMeuSenhor, 300);

Warning to the acolytes

The angels of good have worked so that gambiarras like these are not able to affect the innocent. They haven’t worked in Chrome for years, for example. These evil things will only work in the environment of companies that do not allow their employees to use modern browsers and operating systems. If your employer chains the tortured souls to IE8, go ahead... otherwise you are abandoned to your own fate.

Answer 2

With the code below you get a Javascript effect that makes the element look like it is blinking:

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" />

Answer 3

A very simple way and open an animated GIF instead of Jpeg. You can create with some apps, or even on some websites. Example:

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

If you prefer, you can create a javascript function to change the image or background color. As in the following example.

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>