# 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>
```

{% tabs %}
{% tab title="HTML" %}

```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>
```

{% endtab %}

{% tab title="CSS" %}

```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;
}
```

{% endtab %}

{% tab title="Javascript" %}

```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();
})
```

{% endtab %}
{% endtabs %}

### Como Usar <a href="#ir-para-como-usar" id="ir-para-como-usar"></a>

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.