{"id":15097,"date":"2023-12-22T12:17:08","date_gmt":"2023-12-22T15:17:08","guid":{"rendered":"https:\/\/categoriaoutros.com.br\/?p=15097"},"modified":"2023-12-22T12:28:30","modified_gmt":"2023-12-22T15:28:30","slug":"criar-mensagem-que-desaparece-automaticamente-apos-alguns-segundos-com-bootstrap-e-jquery","status":"publish","type":"post","link":"https:\/\/categoriaoutros.com.br\/?p=15097","title":{"rendered":"Criar Mensagem que Desaparece Automaticamente Ap\u00f3s Alguns Segundos com Bootstrap e JQuery"},"content":{"rendered":"\n

Aprenda a criar uma mensagem que desaparece automaticamente ap\u00f3s alguns segundos, usando HTML, JQuery e Bootstrap.<\/p>\n\n\n\n

Ao criarmos mensagens que desaparecem automaticamente ap\u00f3s alguns segundos em um site tem sua s\u00e3o bastante \u00fateis. Por exemplo, podemos criar notifica\u00e7\u00f5es que desaparecem automaticamente ap\u00f3s alguns segundos para informar ao usu\u00e1rio que as informa\u00e7\u00f5es que ele enviou foram corretamente enviadas ou houve erro por algum campo sem preenchimento. <\/p>\n\n\n\n

O fato da mensagem desaparecer automaticamente, sem exigir que o usu\u00e1rio feche manualmente a notifica\u00e7\u00e3o, \u00e9 uma comodidade que desobriga o usu\u00e1rio de “trabalho \u00e0 mais”.<\/p>\n\n\n

\n
\"Criar
Criar Mensagem que Desaparece Automaticamente Ap\u00f3s Alguns Segundos com Bootstrap e JQuery<\/figcaption><\/figure><\/div>\n\n\n

Inserindo Links CDNs no Cabe\u00e7alho: <head> <\/head><\/h2>\n\n\n\n

Antes de tudo, precisamos inserir entre das tags <head> e <\/head> os links CDNs para Bootstrap e JQuery.<\/p>\n\n\n\n

Se quiser saber o que s\u00e3o Links CDNs clique nesse link: Links CDNs\u00a0<\/a><\/p>\n\n\n\n

Mas, para resumir, esses links s\u00e3o endere\u00e7os que apontam para um servidor na internet e que disponibilizam pacotes, bibliotecas, frameworks… sem que precisemos baixar nada, somente colar o link, conforme abaixo:<\/p>\n\n\n\n

<<\/font>head<\/font>><\/font>\n  <\/font><<\/font>meta<\/font> <\/font>charset<\/font>=<\/font>"UTF-8"<\/font>><\/font>\n  <\/font><<\/font>meta<\/font> <\/font>name<\/font>=<\/font>"viewport"<\/font> <\/font>content<\/font>=<\/font>"width=device-width, initial-scale=1.0"<\/font>><\/font>\n  <\/font><<\/font>link<\/font> <\/font>rel<\/font>=<\/font>"stylesheet"<\/font> <\/font>href<\/font>=<\/font>"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css"<\/font>><\/font>\n  <\/font><<\/font>title<\/font>><\/font>Exemplo de Mensagem com Bootstrap<\/font><\/<\/font>title<\/font>><\/font>\n\n   <\/font><<\/font>link<\/font> <\/font>href<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/css\/bootstrap.min.css"<\/font> <\/font>rel<\/font>=<\/font>"stylesheet"<\/font>><\/font>\n   <\/font><<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/js\/bootstrap.bundle.min.js"<\/font>><\/<\/font>script<\/font>><\/font>\n   <\/font><<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.7.1\/jquery.min.js"<\/font>><\/<\/font>script<\/font>><\/font>\n\n<\/<\/font>head<\/font>><\/font>\n<\/pre>\n\n\n\n
Criando a mensagem a ser clicada  e a div com a informa\u00e7\u00e3o<\/h2>\n\n\n\n
Aqui, criaremos um link com mensagem que quando clicada far\u00e1 aparecer uma informa\u00e7\u00e3o que desaparecer\u00e1 em alguns segundos. Esse link poderia ser um bot\u00e3o ou outra coisa qualquer.<\/p>\n\n\n\n
Crie entre as tags <body> e <\/body><\/p>\n\n\n\n
<<\/font>a<\/font> <\/font>href<\/font>=<\/font>"#"<\/font> <\/font>id<\/font>=<\/font>"mostrarMensagem"<\/font>><\/font>Clique para mostrar a mensagem<\/u><\/font><\/<\/font>a<\/font>><\/font>\n<\/pre>\n\n\n\n
Agora, logo abaixo do link acima, crie a div contendo a mensagem que aparecer\u00e1 quando clicarmos no link acima.<\/p>\n\n\n\n
<<\/font>script<\/font>><\/font>\n  $<\/font>(document<\/font>).ready<\/font>(function<\/font>() <\/font>{<\/font>\n    $<\/font>("#mostrarMensagem"<\/font>).click<\/font>(function<\/font>() <\/font>{<\/font>\n      $<\/font>("#mensagem"<\/font>).fadeIn<\/font>().delay<\/font>(2000).fadeOut<\/font>(); <\/font>\/\/ Exibe a mensagem por 2 segundos<\/font>\n    <\/font>}<\/font>);<\/font>\n  <\/font>}<\/font>);<\/font>\n<\/<\/font>script<\/font>><\/font>\n<\/pre>\n\n\n\n
O script acima \u00e9 feito com JQuery e cont\u00e9m uma fun\u00e7\u00e3o que \u00e9 chamada quando clicarmos em no link chamado #mostrarMensagem<\/strong>.<\/p>\n\n\n\n
Em seguida, a mensagem ir\u00e1 aparecer (fadeIn) e desaparecer\u00e1 (fadeOut) com um atraso (delay) de  2 segundos ou 2000 milissegundos.<\/p>\n\n\n\n
$(“#mensagem”).fadeIn().delay(2000).fadeOut();<\/strong><\/p>\n\n\n\n
Veja todos os posts sobre Bootstrap clicando aqui.<\/a><\/p>\n\n\n\n
Um pouco mais sobre  o trecho: $(“#mostrarMensagem”).click<\/h2>\n\n\n\n
Se for novado, boc\u00ea dever\u00e1 estar se perguntando o que \u00e9 JQuery<\/strong> e esse tal de $(“#mostrarMensagem”).click<\/strong><\/p>\n\n\n\n
jQuery<\/strong> \u00e9 uma biblioteca de JavaScript r\u00e1pida, leve e rica em recursos que simplifica a manipula\u00e7\u00e3o e a intera\u00e7\u00e3o com o HTML, o CSS e o JavaScript em p\u00e1ginas da web. \u00c9 muiiiito, muito usada mesma por profissionais web.<\/p>\n\n\n\n
Quanto ao trecho $(“#mostrarMensagem”).click<\/strong> que usamos acima, \u00e9 um c\u00f3digo jQuery que associa uma fun\u00e7\u00e3o a ser executada quando o elemento com o ID “mostrarMensagem” \u00e9 clicado.<\/p>\n\n\n\n
E esse tal de .click()<\/strong>??? Chamamos isso de m\u00e9todo e \u00e9 um dos muitos eventos dispon\u00edveis no jQuery que voc\u00ea pode usar para reagir a diferentes intera\u00e7\u00f5es do usu\u00e1rio.<\/p>\n\n\n\n
Existem outros eventos que podemos utilizar. veja alguns exemplos:<\/p>\n\n\n\n
    \n
  1. mouseenter e mouseleave:<\/strong>\n