Event while taking the mouse out of the window

Question

Can someone help me? I need a "light", which tells me how to make a modal appear on the screen when I take the mouse from the window, same as this site: http://www.buffetplayhouse.com.br/

Answer 1

Library:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<link rel='stylesheet' href='http://carlsednaoui.github.io/ouibounce/modal.css'>

<script src='https://cdn.jsdelivr.net/ouibounce/0.0.12/ouibounce.min.js'></script>

The archive modal.css obviously can and should be adapted to the brand of your website

Modal you can format whatever you want, however do not change the identification names or class

<!-- Modal -->
<div id="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 is triggered whenever the page is loaded, otherwise it will be activated once for each visitor. When the modal is triggered, a cookie is created to ensure a nonobstructive experience.

Source

Answer 2

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

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

The logic would be to like, how to take the mouse of a Div, or in 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''

Answer 3

Try it on, it should do the trick.

$('body').mouseleave(function(){
    alert('Teste de evento');
});