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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://partners.tray.com.br/themes/construindo-seu-template/referencias/componentes/modal-de-ofertas.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.