Show popup on close tab

Question

Hello. I would like to know a code to display a form as a popup when the user is closing the page. That is, that moment when it takes the cursor up the browser. Because the page was made by the RD tool.

Form in question: https://forms.rdstation.com.br/formulario-071734d1611046a89c8d

Form code:

<div id="formulario-071734d1611046a89c8d"></div>
<script type="text/javascript" src="https://d335luupugsy2.cloudfront.net/js/rdstation-forms/stable/rdstation-forms.min.js"></script>
<script type="text/javascript">
  new RDStationForms('formulario-071734d1611046a89c8d-html', 'UA-11653131074-1').createForm();
</script>

I appreciate anyone who can help.

Answer 1

You can use the event mouseleave in the object document.

This event is triggered every time a user leaves an area, in this case the site area.

new RDStationForms('formulario-071734d1611046a89c8d-html', 'UA-113131074-1').createForm();

document.onmouseleave = function() {
  console.log("oushe");
  document.querySelector("#overlay").style.setProperty("display", "flex", "important")
}

html, body {
  height: 100%;
  width: 100%;
}

#overlay {
  display: none !important;
  height: 100%;
  width: 100%;
  background:rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  position:absolute;
}

<script src="https://d335luupugsy2.cloudfront.net/js/rdstation-forms/stable/rdstation-forms.min.js"></script>

<div id="overlay">
  <div id="formulario-071734d1611046a89c8d"></div>
</div>

Insira o cursor aqui

You can also use the event beforeunload. It will fire when the browser is about to close the entire page.

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "Já vai sair?";

  e.returnValue = confirmationMessage;
  return confirmationMessage;
});

The error that appears is external Javascript problem.