Para bloquear o botão “voltar” do navegador e abrir um popup quando o usuário tenta sair da página, você pode usar uma combinação de JavaScript e manipulação do histórico do navegador. Aqui está um exemplo de como você pode fazer isso:
<script>
function abrirPopup() {
var botao = document.getElementById('abrir-popup');
if (botao) {
botao.click();
}
}
window.addEventListener('load', function() {
// Adiciona uma entrada falsa ao histórico
history.pushState({ prevUrl: location.href }, '');
window.onpopstate = function(event) {
history.go(1);
abrirPopup();
// Adiciona novamente uma entrada ao histórico
history.pushState({ prevUrl: location.href }, '');
};
});
</script>
Segundo código para permitir saída após apenas um clique no botão voltar do mobile:
<script>
let contadorSaida = 0;
function abrirPopup() {
var botao = document.getElementById('abrir-popup');
if (botao) {
botao.click();
}
}
window.addEventListener('load', function() {
// Adiciona uma entrada falsa ao histórico
history.pushState({ prevUrl: location.href }, '');
window.onpopstate = function(event) {
if (contadorSaida < 2) {
history.go(1);
abrirPopup();
contadorSaida++;
// Adiciona novamente uma entrada ao histórico
history.pushState({ prevUrl: location.href }, '');
}
};
});
</script>
Em seguida inserimos um botão que dispara o evento de saída:
<a href="#" id="abrir-popup" style="display:none">Esconder Botão</a>