Alguém pode me ajudar? Preciso de uma "luz", que me indique como faço pra que um modal apareça na tela quando eu tiro o mouse da janela, igual a desse site: http://www.buffetplayhouse.com.br/
3 Respostas
Biblioteca:
<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>
O arquivo
modal.css
obviamente pode e deve ser adaptado à marca do seu site
Modal você pode formatar o que quiser, no entanto, não altere os nomes de identificação ou classe
<!-- 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();
});
Com modo aggressive:
true
, o modal é acionado sempre que a página for carregada, caso contrário será ativado uma vez para cada visitante. Quando o modal é acionado, um cookie é criado para assegurar uma experiência não obstrutiva.
Testa isso aí, deve resolver.
$('body').mouseleave(function(){
alert('Teste de evento');
});
-
Deu certo Marcos, mas poderia me auxiliar em mais duas coisas? Eu tenho pouca experiência em Jquery... Preciso que a função a desempenhar não seja um alert, e sim seja que quando eu tiro o mouse, uma div que está com "display: none" apareça. E outra coisa é que esse evento ocorra uma vez só, e só ocorra novamente se a página for atualizada...– ClaytonCommented 15/08/2017 às 23:27
Boa noite. Como você disse que precisava apenas de uma 'luz' não colocarei códigos ou algo do tipo.
- Existe uma função no JQuery que se chama 'MouseOut'. Como visto na TAG, vi que você poderia utilizá-lá. Pra saber mais sobre ela CLIQUE AQUI
A lógica ficaria a gosto, como tirar o mouse de uma Div, ou no caso, do site exemplo que você me mandou, eles utilizam o evento no 'BODY' do site, sendo assim, quando fora do 'Body', a div apareceria.
edit1: O Body deve possuir algum elemento para com que assim possa ser 'manejável'