Click a buttom and a prompt appears

Question

I have a button, and I intend that, by clicking, a prompt to ask if you really want to leave the page, with 2 options: Confirm or cancel.

If you click confirm, it will go to the button, otherwise the prompt closes and nothing happens.

How can I do that?

Answer 1

You can do with a same link tag (<a></a>) and the function confirm of Javascript. Example:

<a href="https://www.google.com/" target="_blank" onclick="return confirm('Deseja realmente sair?');">Sair do site</a>

Detailing:

The event is added onclick on the tag a which returns the function result confirm.

The function confirm is native to Javascript, and opens a window displaying the text passed as parameter, an 'OK' button and an 'Cancel' button. If the user clicks 'OK', the function returns true. If the user clicks 'Cancel', the function returns false.

On returning false for the event onclick, it interrupts the execution of the element’s standard action, which in the case of the tag a is the call to the link specified in the attribute href.

Note: Semantically, the most suitable for this action would be the use of the tag <a></a>, because by definition, indicates the link of the current page with another page. You can read more about the definition and use of the tag a in: https://www.w3schools.com/tags/tag_a.asp

Answer 2

You can do by placing the page link that should be directed already in Javascript:

btn = document.getElementById('btn');

btn.addEventListener('click', function() {
  var b = confirm('Tem certeza que quer sair?');
  if (b){
    window.location = "http://answall.com";
  }
});

<button id="btn">Sair</button>

Answer 3

Alternative solution using a button:

function confirmaSaida() {
  var confirmado = confirm("Deseja realmente sair da página?");

  if (confirmado === true) {
      self.location = "https://www.google.com";
  }
}

<input type="button" value="Sair da página" onclick="confirmaSaida();" />

Placing the link in tag input:

function confirmaSaida() {
  var confirmado = confirm("Deseja realmente sair da página?");

  if (confirmado === true) {
      self.location = document.getElementById("btn").getAttribute("data-link");
  }
}

<input id="btn" name="btn" type="button" value="Sair da página" onclick="confirmaSaida();" data-link="https://www.google.com" />