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
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
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>
The
modal.css
fileobviouslycanandshouldbetailoredtoyoursite'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 >
Test this, you should solve.
$('body').mouseleave(function(){
alert('Teste de evento');
});
Good evening. Since you said you only needed a 'light' I will not put any codes or anything.
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'