Modal de Ofertas
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>
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.
Last updated
Was this helpful?