Ao desenvolver um site, é importante proporcionar uma experiência agradável aos visitantes. Uma maneira de fazer isso é exibindo uma mensagem de agradecimento quando o usuário tenta fechar a aba do navegador. Neste tutorial, vamos aprender como criar um popup de agradecimento usando JavaScript.
Passo 1: Preparando o Ambiente
Antes de começarmos, crie um arquivo HTML chamado popup.html e abra-o em um editor de texto ou ambiente de desenvolvimento.
Passo 2: Escrevendo o Código HTML Básico
Dentro do arquivo popup.html, insira o seguinte código HTML:
htmlCopy code<!DOCTYPE html>
<html>
<head>
<title>Popup de Agradecimento</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Passo 3: Adicionando o Script JavaScript
Crie um novo arquivo chamado script.js no mesmo diretório que o popup.html e insira o seguinte código JavaScript:
javascriptCopy code// Função que exibe o popup
function exibirPopup() {
return "Obrigado pela visita!";
}
// Adiciona um ouvinte de eventos para o caso de o usuário tentar fechar a aba
window.addEventListener('beforeunload', function(event) {
var mensagem = exibirPopup();
// Exibe a mensagem em um popup
alert(mensagem);
// Não é necessário retornar uma mensagem personalizada, mas alguns navegadores antigamente exigiam isso
var mensagemPersonalizada = "Você realmente deseja sair desta página?";
event.returnValue = mensagemPersonalizada;
return mensagemPersonalizada;
});
Explicação:
- A função
exibirPopupretorna a mensagem que será exibida no popup. - O código JavaScript adicionado ao final do corpo HTML adiciona um ouvinte de eventos que é acionado quando o usuário tenta fechar a aba ou a janela do navegador. Em seguida, exibe a mensagem de agradecimento em um popup usando
alert.
Agora, ao abrir a página popup.html, os visitantes verão um popup de agradecimento quando tentarem fechar a aba do navegador. Lembre-se de que essa técnica pode não funcionar em todos os navegadores e pode ser bloqueada por configurações de segurança. Portanto, é sempre uma boa prática fornecer um agradecimento visível na própria página.
0 comentário