Aprenda a criar uma mensagem que desaparece automaticamente após alguns segundos, usando HTML, JQuery e Bootstrap.
Ao criarmos mensagens que desaparecem automaticamente após alguns segundos em um site tem sua são bastante úteis. Por exemplo, podemos criar notificações que desaparecem automaticamente após alguns segundos para informar ao usuário que as informações que ele enviou foram corretamente enviadas ou houve erro por algum campo sem preenchimento.
O fato da mensagem desaparecer automaticamente, sem exigir que o usuário feche manualmente a notificação, é uma comodidade que desobriga o usuário de “trabalho à mais”.
Inserindo Links CDNs no Cabeçalho: <head> </head>
Antes de tudo, precisamos inserir entre das tags <head> e </head> os links CDNs para Bootstrap e JQuery.
Se quiser saber o que são Links CDNs clique nesse link: Links CDNs
Mas, para resumir, esses links são endereços que apontam para um servidor na internet e que disponibilizam pacotes, bibliotecas, frameworks… sem que precisemos baixar nada, somente colar o link, conforme abaixo:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <title>Exemplo de Mensagem com Bootstrap</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head>
Criando a mensagem a ser clicada e a div com a informação
Aqui, criaremos um link com mensagem que quando clicada fará aparecer uma informação que desaparecerá em alguns segundos. Esse link poderia ser um botão ou outra coisa qualquer.
Crie entre as tags <body> e </body>
<a href="#" id="mostrarMensagem">Clique para mostrar a mensagem</a>
Agora, logo abaixo do link acima, crie a div contendo a mensagem que aparecerá quando clicarmos no link acima.
<script>
$(document).ready(function() {
$("#mostrarMensagem").click(function() {
$("#mensagem").fadeIn().delay(2000).fadeOut(); // Exibe a mensagem por 2 segundos
});
});
</script>
O script acima é feito com JQuery e contém uma função que é chamada quando clicarmos em no link chamado #mostrarMensagem.
Em seguida, a mensagem irá aparecer (fadeIn) e desaparecerá (fadeOut) com um atraso (delay) de 2 segundos ou 2000 milissegundos.
$(“#mensagem”).fadeIn().delay(2000).fadeOut();
Veja todos os posts sobre Bootstrap clicando aqui.
Um pouco mais sobre o trecho: $(“#mostrarMensagem”).click
Se for novado, bocê deverá estar se perguntando o que é JQuery e esse tal de $(“#mostrarMensagem”).click
jQuery é uma biblioteca de JavaScript rápida, leve e rica em recursos que simplifica a manipulação e a interação com o HTML, o CSS e o JavaScript em páginas da web. É muiiiito, muito usada mesma por profissionais web.
Quanto ao trecho $(“#mostrarMensagem”).click que usamos acima, é um código jQuery que associa uma função a ser executada quando o elemento com o ID “mostrarMensagem” é clicado.
E esse tal de .click()??? Chamamos isso de método e é um dos muitos eventos disponíveis no jQuery que você pode usar para reagir a diferentes interações do usuário.
Existem outros eventos que podemos utilizar. veja alguns exemplos:
- mouseenter e mouseleave:
$("#elemento").mouseenter(function() {...});Executado quando o cursor do mouse entra no elemento.$("#elemento").mouseleave(function() {...});Executado quando o cursor do mouse deixa o elemento.
- change:
$("#elemento").change(function() {...});Executado quando o valor de um elemento de formulário (como um<input>ou<select>) é alterado.
- submit:
$("#form").submit(function() {...});Executado quando um formulário é enviado.
- keydown e keyup:
$("#elemento").keydown(function() {...});Executado quando uma tecla é pressionada.$("#elemento").keyup(function() {...});Executado quando uma tecla é liberada.
- focus e blur:
$("#elemento").focus(function() {...}); Executado quando um elemento recebe foco.$("#elemento").blur(function() {...});Executado quando um elemento perde o foco.
- load:
$("#elemento").load(function() {...});Executado quando um recurso, como uma imagem, é completamente carregado.