1

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/

1
  • 1
    Compartilhe seu codigo por favor.
    – BrTkCa
    Commented 15/08/2017 às 20:10

3 Respostas 3

4

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.

Fonte

1
  • Perfeito!!!! É isso!!!!!!
    – Clayton
    Commented 15/08/2017 às 23:43
0

Testa isso aí, deve resolver.

$('body').mouseleave(function(){
    alert('Teste de evento');
});
1
  • 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...
    – Clayton
    Commented 15/08/2017 às 23:27
0

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'

0

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .