JavaScript

Como criar um modal de confirmação com JavaScript

26 de agosto de 2021

Como criar um modal de confirmação com JavaScript

Neste artigo você vai aprender a como criar um modal de confirmação com JavaScript, possibilitando o usuário prosseguir ou cancelar uma ação

criar um modal de confirmação com JavaScript capa

Fala programador(a), beleza? Bora aprender mais sobre criação de modal e também JavaScript!

Note que vamos utilizar um recurso padrão da linguagem, ou seja, não podemos alterar HTML e CSS

Pois esta função se comporta de forma parecida a do alert, mas resolve o nosso problema

A ideia é utilizar a função confirm, onde o usuário pode escolher sim ou não

O código para criar o modal é:

if (confirm('Você tem certeza?')) {
  // Lógica para prosseguir com a ação
} else {
  // Aqui fazemos algo quando o usuário cancela
}

Então dentro do if podemos inserir duas lógicas distintas, quando o usuário aceita ou cancela a solicitação

Esta função é bem interessante para remoção de um registro, onde exige uma confirmação do usuário antes

Mas como dito anteriormente: há o problema de não podermos alterar o estilo do modal e nem adicionar HTML

Caso você precise mudar a aparência, o correto é criar uma estrutura onde você determina todo o HTML e CSS, fazendo o modal aparecer com base em alguma ação por meio do DOM

O trabalho é muito mais pesado, porém totalmente customizável

Conclusão

Neste artigo você aprendeu a como criar um modal de confirmação com JavaScript

Utilizamos a funçaõ confirm, que faz exatamente o proposto

Porém não podemos alterar sua aparência, nem os textos do botão, esse é o ponto negativo desta abordagem

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x