Quando o usuário vai sair da loja e passa o mouse sobre a URL, o Modal de Ofertas aparece chamando atenção do mesmo para uma promoção, por exemplo.
Observações: O modal será exibido apenas uma vez no período de 24 horas.
Para esse componente utilizaremos o plugin Ouibounce (https://github.com/carlsednaoui/ouibounce).
Para adicionar esse plugin ao layout adicione a chamada abaixo em seu arquivo default.html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ouibounce/0.0.12/ouibounce.js"></script>
<div id="showModal">
<div class="underlay"></div>
<div class="modal" id="show">
<div class="modal-body">
<span class="modal-close">×</span>
<div class="content">
Texto ou imagem desejada
</div>
</div>
</div>
</div>
#showModal {
display: none;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#showModal .underlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background-color: rgba(0,0,0,0.5);
cursor: pointer;
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#showModal .modal {
width: 600px;
height: 400px;
background-color: #f0f1f2;
z-index: 9999;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#showModal .modal-close{
float: right;
}
#show{
display: block;
}
ouibounce(document.getElementById('showModal'), {
cookieExpire: 1,
callback: function() { $('#showModal').show(); }
});
//Fecha Modal
jQuery('body').on('click', function() {
jQuery('#showModal').hide();
});
jQuery('#showModal .modal-close').on('click', function() {
jQuery('#showModal').hide();
});
jQuery('#showModal .modal').on('click', function(e) {
e.stopPropagation();
})
Como Usar
Insira o código html ao final do arquivo default.html antes do fechamento da tag </body>
Insira o bloco de código JavaScript em seu arquivo de funções ou onde desejar.
Insira o bloco de código CSS em seu arquivo de estilização.
