How to create a popup that flashes on the screen? [closed]

0

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

    
asked by anonymous 26.09.2017 / 23:45

3 answers

14
The below illustrates how the use of this technique for drawing attention is elegant, pleasant, and recommended in the papers written about user experience and interface design:

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

Damn form 1:

This form only works if the popup is in the same domain as the flap 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

27.09.2017 / 00:12
1

With the code below you get a JavaScript effect that makes the element look as if it were 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" />
    
27.09.2017 / 01:28
-1

A very simple way to open an animated GIF in place of Jpeg. You can create it with some applications, or even on some websites. Example:

link

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

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><divid="boxOfTheHell">
  Exemplo pisca pisca.
</div>
    
26.09.2017 / 23:52