30.04.2025

Implementando Confirmação Antes da Exclusão: Diálogo 'OK'/'Cancelar'

Resposta Rápida

Para criar um diálogo de confirmação, você pode usar a função JavaScript confirm() em conjunto com o evento onclick:

<button onclick="return confirm('Você tem certeza de que deseja excluir permanentemente esses dados?');">Excluir</button>

Clicar no botão "OK" permite a exclusão, enquanto "Cancelar" interrompe o processo.

Compreendendo a Importância da Confirmação do Usuário

Uma vez que a operação de exclusão de dados é geralmente irreversível, a aplicação da função confirm() serve como uma forma de proteção, permitindo que o usuário reconsidere e evite a perda de dados.

Interação do Usuário

O evento onclick é uma ferramenta poderosa nas mãos de um desenvolvedor web. Sua combinação com confirm() permite que os usuários confiram ou cancelem um comando de exclusão de forma clara e fácil:

<a href="#" onclick="return confirm('Você tem certeza de que deseja executar esta ação?');">Excluir</a>

Consistência com o Design

Como o diálogo confirm() é um elemento do sistema, sua característica distinta é que ele se integra harmoniosamente ao estilo geral da página e não interrompe a integridade visual.

Separação Clara Entre HTML e JavaScript

Se mantivermos uma separação de código entre HTML e JavaScript, isso ajuda a escrever um código mais estruturado e limpo:

function considereAntesDeExcluir() {
    let respostaUsuario = confirm('Você tem certeza de que deseja excluir isso?');
    if (respostaUsuario) {
        // Exclusão confirmada!
    }
}

Em HTML, esse código pareceria assim:

<button onclick="return considereAntesDeExcluir()">Excluir</button>

Dominando Confirmações Avançadas

Melhore a experiência do usuário e o nível de controle do seu código utilizando recursos adicionais.

Usando Atributos de Dados para Transportar Mensagens

Os atributos data-* do HTML5 são ótimos para criar mensagens de confirmação ocultas diretamente no HTML, mantendo o código JavaScript limpo e suas funções claras:

<button data-confirm="Você realmente está pronto para fazer isso?">Excluir</button>

Em seguida, extraia o atributo em JavaScript:

document.querySelector('button[data-confirm]').onclick = function() {
    return confirm(this.getAttribute('data-confirm'));
};

Cancelando um Evento

A função preventDefault() é adequada para cenários de exclusão complexos, permitindo que você mantenha o processo sob controle até que o usuário confirme a ação:

document.querySelector('button[data-confirm]').onclick = function(e) {
    if (!confirm(this.getAttribute('data-confirm'))) {
        e.preventDefault(); // Exclusão cancelada!
    }
};

Compatibilidade com Vários Navegadores

Certifique-se de que seu código JavaScript suporte todos os navegadores populares, incluindo versões mais antigas do Internet Explorer.

Visualização

Vamos visualizar o processo:

Antes: [📄, 📄, 📄❌, 📄] // Planejando excluir o terceiro documento.

Ativando a função confirm():

if (confirm('Você tem certeza de que deseja executar esta ação?')) {
    // Exclusão confirmada!
}

A ação aguarda confirmação:

Após a confirmação: [📄, 📄, 🕸️❌] // A exclusão ainda não ocorreu.

Se a ação for confirmada:

Após a exclusão: [📄, 📄, 📄] // O terceiro documento foi excluído.

Se a ação for cancelada:

Sem alterações: [📄, 📄, 📄❌, 📄] // Todos os documentos permanecem no lugar.

Caminhando para Soluções Personalizadas

Quando a função confirm() parece muito rígida, crie sua própria solução que torne o aplicativo mais fácil de usar.

Criando uma Janela Modal Personalizada

Você pode implementar uma janela modal personalizada que se encaixe em seu design e forneça opções de ação interativas:

<div id="modalPersonalizado" class="modal">
  <div class="modal-conteudo">
    <p>Você tem certeza de que deseja excluir?</p>
    <button id="simExcluir">Sim, excluir</button>
    <button id="naoExcluir">Não, manter</button>
  </div>
</div>

Em JavaScript, configure a exibição e o ocultamento da janela modal, bem como o tratamento dos cliques nos botões:

document.getElementById('simExcluir').onclick = function() {
    // Exclusão confirmada.
    ocultarModal();
};

document.getElementById('naoExcluir').onclick = function() {
    // Exclusão cancelada.
    ocultarModal();
};

function ocultarModal() {
    document.getElementById('modalPersonalizado').style.display = 'none';
}

Considerando as Preferências do Usuário

Sempre lembre-se do usuário e assegure que o processo de confirmação seja claro e não cause confusão ou insatisfação.

Recursos Úteis

1. Método confirm() da Window - Web APIs | MDN — Descrição da função window.confirm().
2. Interação: alert, prompt, confirm - JavaScript.info — Uma coleção de dicas sobre como trabalhar com janelas de diálogo interativas.
3. Considerações para Estilização de uma Modal | CSS-Tricks — Dicas para estilização de janelas modais.
4. Como criar um diálogo com opções “Ok” e “Cancelar” - Stack Overflow — Criação colaborativa de uma caixa de diálogo no Stack Overflow.
5. GitHub - ghosh/Micromodal: ⭕ Tiny javascript library for creating accessible modal dialogs — Uma biblioteca para desenvolvedores que desejam criar janelas modais personalizáveis.
6. Como Melhorar Janelas Modais Para Todos — Smashing Magazine — Recomendações para criar modais que sejam fáceis de usar para todos os usuários.

Video

Navigation