Pop up with jquery before closing the browser

Question

People would like to do a pop up that appears before the person closes the browser tab equal to Shoptime: http://www.shoptime.com.br/

I don’t have much Javascript knowledge, much less jquery. Can anyone help me?

Answer 1

You can do this effect with a plugin called Ouibounce.

---

After installing the plugin and calling it on the page, create a hidden div with an id for it, for example:

<div id="ouibounce-modal">
  <div class="modal">
    <div class="modal-title">
      <h3>Modal de Exemplo</h3>
    </div>

    <div class="modal-body">
      <p>Exemplo</p>

    <div class="modal-footer">
      <p>Fechar</p>
    </div>
  </div>
</div>

And call a javascript to assign the Ouibounce event to that div

var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
        aggressive: true,
        timer: 0,
        callback: function() {
           _ouibounce.disable();
        }
      });

  $('body').on('click', function() {
    $('#ouibounce-modal').hide();
  });
# Essa função vai fechar o modal quando eu clicar fora dele #

  $('#ouibounce-modal .modal-footer').on('click', function() {
    $('#ouibounce-modal').hide();
  });
# Essa função vai fechar o modal quando eu clicar no botão 'Fechar' #

  $('#ouibounce-modal .modal').on('click', function(e) {
    e.stopPropagation();
  });
# Essa função vai impedir o modal de ser fechado se eu clicar dentro dele #

Answer 2

You can use the fancybox, see below:

$(function() {

    var content = '<div id="conteudo" class="col-xs-12 col-md-12">Sua propaganda aqui!</div>';
    $.fancybox.open([{
                   type: 'inline',
                   autoScale: true,
                   minHeight: 30,
                   content: content,
                   closeBtn:true
                  }], { padding: 0 });
});