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>

HTML

<div id="showModal">
  <div class="underlay"></div>
  <div class="modal" id="show">
    <div class="modal-body">          
      <span class="modal-close">&times;</span>
      <div class="content">
        Texto ou imagem desejada
      </div>
    </div>
  </div>
</div>

CSS

Javascript

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.