Customize o Alert do seu Javascript

Torna as mensagens pop-up fáceis e bonitas.


Customize o Alert do seu Javascript

A maioria das aplicações web precisam, em algum momento retornar um feedback para o usuário, ou solicitar alguma informação através de janelas de alerta ou janelas pop-up. O javascript puro oferece as funções alert, confirm e prompt para tal propósito, mas além de bloquear o navegador, o layout dessas janelas não é configurável, variando de acordo com o navegador.

Devido a esses problemas, a maioria das pessoas preferem desenvolver suas próprias janelas pop-up com o uso de div e CSS. Essa solução funciona bem, se você tiver bastante paciência para definir a janela, manipular a interação através do javascript, tratar incompatibilidades de browser etc.

Para quem não quer ter todo esse trabalho, existem APIs específicas para exibição de janelas que já vem com um layout padrão, mas que pode ser alterado via CSS, e já trata da interação da janela de forma simples.

Nesse post vou descrever uma dessas APIs, o SweetAlert, que fornece alertas bastante agradáveis, e que podem ser utilizadas de forma bem simples.

Instalação e Uso

Você pode usar diretamente pelo link do SweetAlert, exemplo:

Use a função swal, sw eet al ert

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<a href="#" onclick="swal('Testanto o SweetAlert.');">Clique aqui</a>

Após clicar vai surgir a mensagem assim: SweetAlert usando online

Ou baixando e linkando localmente, exemplo:

wget https://unpkg.com/sweetalert/dist/sweetalert.min.js
<script src="sweetalert.min.js"></script>
<a href="#" onclick="swal('Testanto o SweetAlert.');">Clique aqui</a>

Ainda pode usar com combinado NPM/Yarn com uma ferramenta como o Browserify ou Webpack que é a maneira mais correta de uso e você pode customizar diversos outros tipos de mensagens: .

npm install sweetalert --save

Em seguida, basta importá-lo para o seu aplicativo:

import swal from 'sweetalert';

Para mais informações de uso como exemplos para React.js e Vue.js consulte o guia completo: https://sweetalert.js.org/guides/

Conheça também o sweetalert2 que há outras formas de implementações, como por exemplo com o Angular.js.

Ainda não aprendeu Javascript? Assista o vídeo abaixo e entre para esse vasto mundo!

Até mais!


javascript reactjs vuejs angularjs sweetalert html css


Compartilhe


Nosso canal no Youtube

Inscreva-se


Marcos Oliveira

Marcos Oliveira

Desenvolvedor de software
https://github.com/terroo

Artigos Relacionados




Pacote Promocional com Todos os Cursos

Adquira todos os cursos para se tornar um ninja do Terminal e do Linux.

Mais detalhes

Receba as novidades no seu e-mail!

Após cadastro e confirmação do e-mail, enviaremos semanalmente resumos e também sempre que houver novidades por aqui para que você mantenha-se atualizado!


caso queira entrar em contato conosco, envie-nos um e-mail.