3

Eu tenho um button, e pretendo que, ao clicar, apareça um prompt a perguntar se quer mesmo sair da página, com 2 opções: Confirmar ou cancelar.

Caso clique em confirmar, ele vai para o link do button, caso contrário, o prompt fecha e não acontece nada.

Como posso fazer isso?

2

3 Respostas 3

6

Você pode fazer com uma tag de link mesmo (<a></a>) e a função confirm do JavaScript. Exemplo:

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

Detalhando:

É adicionado o evento onclick na tag a que retorna o resultado da função confirm.

A função confirm é nativa do JavaScript, e abre uma janela exibindo o texto passado como parâmetro, um botão de 'OK' e um de 'Cancelar'. Caso o usuário clique em 'OK', a função retorna true. Caso o usuário clique em 'Cancelar', a função retorna false.

Ao retornar false para o evento onclick, ele interrompe a execução da ação padrão do elemento, que no caso da tag a é a chamada para o link indicado no atributo href.

Obs: Semanticamente, o mais indicado para esta ação seria a utilização da tag <a></a>, pois por definição, indica o link da página atual com outra página. Você pode ler mais sobre a definição e uso da tag a em: https://www.w3schools.com/tags/tag_a.asp

1
  • Obrigado! Excelente resposta.
    – Gonçalo
    Commented 24/08/2017 às 14:34
3

Pode fazer colocando o link da página que deve ser direcionada já no JavaScript:

btn = document.getElementById('btn');

btn.addEventListener('click', function() {
  var b = confirm('Tem certeza que quer sair?');
  if (b){
    window.location = "http://pt.stackoverflow.com";
  }
});
<button id="btn">Sair</button>

2
  • Eu não pretendo colocar o link no javascript, mas sim no html com href, é possivel?
    – Gonçalo
    Commented 24/08/2017 às 14:22
  • Neste caso é melhor utilizar o exemplo do @DiegoMarques e estilizar para o link parecer um botão. Commented 24/08/2017 às 14:33
1

Solução alternativa utilizando um 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();" />

Colocando o link na 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" />

2
  • Eu não pretendo colocar o link no javascript, mas sim no html com href, é possivel?
    – Gonçalo
    Commented 24/08/2017 às 14:22
  • Colocar href no input button não é possível. Uma alternativa seria utilizar uma tag data- custimazada, como: data-link="url". Vou editar a minha resposta com essa opção. Commented 24/08/2017 às 15:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .