Quando o usuário vai sair da loja que ele coloca o mouse na URL para digitar uma nova URL ele aparece chamando atenção do mesmo para uma oferta por exemplo.
Observações: A modal será exibida apenas uma vez no período de 24 horas.
Para esse componente utilizaremos o plugin Ouibounce para exibir a modal.
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>
HTML
<div id="showModal">
<div class="underlay"></div>
<div class="modal" id="show">
<div class="modal-body">
<span class="modal-close">×</span>
<a href="{{ links.search_offer }}">
<img src="{{ asset('img/sale.png') }}" alt="">
</a>
</div>
</div>
</div>
Javascript
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();
})
Css
#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;
}
Exemplo
Como Usar
Copie 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.
Comentários