Event when mouse is pulled from window [closed]

1

Can anyone help me? I need a "light", which tells me how do I make a modal appear on the screen when I take the mouse from the window, just like that site: link

    
asked by anonymous 15.08.2017 / 22:07

3 answers

4

Library:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><linkrel='stylesheet'href='http://carlsednaoui.github.io/ouibounce/modal.css'><scriptsrc='https://cdn.jsdelivr.net/ouibounce/0.0.12/ouibounce.min.js'></script>
  

Themodal.cssfileobviouslycanandshouldbetailoredtoyoursite'sbranding

ModalYoucanformatwhateveryouwant,however,donotchangetheidentificationorclassnames

<!--Modal--><divid="ouibounce-modal">
<div class="underlay"></div>
<div class="modal">       
<div class="modal-title"><h3>Exemplo de modal ao sair da página!</h3></div>
<div class="modal-body"> <p>Bla bla bla bla bla</p></div>
<div class="modal-footer"><p>Fechar</p></div>           
</div>
</div>

Script

var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
//o modal é acionado sempre que a página for carregada
aggressive: true,
timer: 0,
callback: function() { console.log('ouibounce fired!'); }
});
// Oculta o modal quando o visitante clicar fora da janela modal
$('body').on('click', function() {
$('#ouibounce-modal').hide();
});
// Oculta o modal quando o visitante clicar no link de fechar
$('#ouibounce-modal .modal-footer').on('click', function() {
$('#ouibounce-modal').hide();
});
//Impede o modal de ser fechado ao clicar dentro dele
$('#ouibounce-modal .modal').on('click', function(e) {
e.stopPropagation();
});
  

With aggressive mode: true , the modal fires whenever the page loads, otherwise it will be activated once for each visitor. When the modal is triggered, a cookie is created to ensure an unobtrusive experience.

Source >

    
16.08.2017 / 00:04
0

Test this, you should solve.

$('body').mouseleave(function(){
    alert('Teste de evento');
});
    
15.08.2017 / 23:10
0

Good evening. Since you said you only needed a 'light' I will not put any codes or anything.

  • There is a function in JQuery that is called 'MouseOut'. As seen in the TAG, I saw that you could use it. To learn more about her CLICK HERE

The logic would be to like, how to take the mouse of a Div, or in the case, of the example site you sent me, they use the event in the 'BODY' of the site, so when outside the 'Body' the div would appear.

edit1: Body must have some element so that it can be 'manageable'

    
15.08.2017 / 22:14