26.01.2025

Personalizando a Caixa de Confirmação em JavaScript

Resposta Rápida

A caixa de confirmação padrão em JavaScript oferece opções limitadas de personalização. Assim, os botões padrão "OK" e "Cancelar" não podem ser substituídos por "Sim" e "Não". No entanto, há uma solução — janelas modais personalizadas. Abaixo está um exemplo de uma janela que é fácil de interpretar e usar:

<div id="confirmModal" style="display:none;">
  <p>Tem certeza que deseja prosseguir?</p>
  <button id="yesBtn">Sim</button>
  <button id="noBtn">Não</button>
</div>

// Mostrar ou ocultar a janela modal.
const confirmModal = document.getElementById('confirmModal');
const yesBtn = document.getElementById('yesBtn');
const noBtn = document.getElementById('noBtn');
function showModal() { confirmModal.style.display = 'block'; }
function hideModal() { confirmModal.style.display = 'none'; }

// Configurar manipuladores para os botões.
yesBtn.addEventListener('click', () => { hideModal(); /* Código para "Sim" */ });
noBtn.addEventListener('click', () => { hideModal(); /* Código para "Não" */ });

Para exibir a janela de confirmação, basta chamar a função showModal().

Métodos para Criar Janelas Modais Personalizadas

Usando jQuery UI

Está interessado em uma solução universal para todos os navegadores? jQuery UI Dialogs é uma ferramenta que permite criar diálogos de confirmação personalizados. Eles oferecem uma experiência do usuário consistente em diferentes navegadores:

$("#confirmModal").dialog({
  resizable: false,
  height: "auto",
  width: 400,
  modal: true,
  buttons: {
    "Sim": function() { 
      $(this).dialog("close"); 
      // Código para "Sim".
    },
    "Não": function() {
      $(this).dialog("close"); 
      // Código para "Não".
    }
  }
});

Estilo do SweetAlert

Se o estilo é importante para você, considere o SweetAlert. Ele proporciona elegância às suas janelas modais com belos botões de Sim e Não:

swal({
  title: "Tem certeza?",
  icon: "warning",
  buttons: {
    yes: {
      text: "Sim",
      value: true,
      className: "sweet-yes"
    },
    no: {
      text: "Não",
      value: false,
      className: "sweet-no"
    }
  },
}).then((value) => {
  if (value) {
    // Código para "Sim".
  } else {
    // Código para "Não".
  }
});

Diálogos Baseados em DOM

Se você prefere trabalhar diretamente com o DOM e criar soluções personalizadas, esta abordagem é para você:

// Base para o popup com delegação de eventos
document.body.addEventListener('click', function(event) {
  if(event.target.id === 'yesBtn') { /* Código para "Sim" */ }
  if(event.target.id === 'noBtn') { /* Código para "Não" */ }
});

Conformidade com Padrões de Acessibilidade

Não se esqueça de tornar seu popup acessível. Gerenciar o foco do teclado e atributos ARIA, como role="dialog" e aria-labelledby, ajudará a tornar sua modal amigável para usuários de leitores de tela.

Visualização

Esta é a sua chance de transformar os botões padrão de diálogo em JavaScript de OK e Cancelar para Sim e Não:

Diálogo padrão: [🆗 OK] [✖️ Cancelar]

Após tal transformação, o diálogo ficará assim:

Diálogo personalizado: [✔️ Sim] [❌ Não]

Implementando Esquemas de Cores Corporativas

Por que não personalizar sua janela modal com o estilo da sua marca? Personalize os cabeçalhos e botões, pinte-os nas cores da sua empresa e adicione o logotipo da sua empresa para aumentar o reconhecimento.

Promessas: Lidando com Respostas do Usuário

Usar promessas e o modelo async/await simplifica a gestão das ações assíncronas dos usuários, tornando seu código mais claro e estruturado.

Consistência Entre Navegadores

É crucial que suas janelas modais funcionem igualmente bem em todos os navegadores e dispositivos. Bibliotecas de terceiros como jQuery UI garantem compatibilidade, mas pode ser necessário um processamento adicional de estilo e funcionalidade para soluções personalizadas.

Recursos Úteis

1. Modais no Bootstrap — Informações sobre a criação de modais no Bootstrap.
2. Método Window.confirm() - MDN Web Docs — Documentação sobre a janela de confirmação padrão.
3. Criando um diálogo com opções "OK" e "Cancelar" no Stack Overflow — Discussão sobre a criação de diálogos de confirmação personalizados.
4. SweetAlert — Biblioteca para personalizar janelas de confirmação padrão.
5. Estilizando uma Janela Modal no CSS-Tricks — Dicas para o design de janelas modais.
6. Conceitos Básicos de Promessas em JavaScript — Informação introdutória sobre promessas em JavaScript.
7. Vue Mastery — Guia para criar janelas modais em Vue.js.

Video

Navigation