How do I make the alert fade after I display it on a div?

Question

How do I make the alert fade after I display it on a div?

Navigation

#1 by (6 votes)
#2 by (2 votes)

0

I'm doing an application using JavaScript and JQuery, and when I put an alert to display an error in a div, it does not disappear, just by clicking on the x to close, I'd like to know how do I get rid of it after some time.

 Código HTML
 <div id="erro" class="alert alert-danger alert-dismissible fade show">
                        <button type="button" class="close" onclick="$('#erro').hide()">&times;</button>
                        IP fora da faixa, por favor, digite dois IP's válidos
 </div>


Código JavaScript
$("#erro").show();

javascript jquery

asked by anonymous 27.06.2018 / 01:01

2 answers

Mount A-Z listing in PHP VUE value filter in v-for

score 6 · Answer 1

To make the alert run for a certain period of time, use the setTimeout function. As in the example:

$("#erro").show();
setTimeout(function () {
  $("#erro").hide();
}, 3000);

In case, this '3000' means that it will run for 3 seconds until it disappears, you can change it as you like.

score 2 · Answer 2

It is not necessary to use a library (85KB) for so little, 6 lines of javascript (220 bytes) solve.

    setTimeout(function () {
      document.getElementById("erro").style.display = "none";
    }, 3000);
    function hide(){
    document.getElementById("erro").style.display = "none";
    }

 <div id="erro" class="alert alert-danger alert-dismissible fade show">
                        <button type="button" class="close" onclick="hide()">&times;</button>
                        IP fora da faixa, por favor, digite dois IP's válidos
 </div>