How to make alert message disappear in Django

Question

This is in my base html.The alert causes white space above my navbar. How do i make the message only show for 5 seconds and automatically close?

{% if messages %}
          {% for message in messages %}
             <div class = "alert alert-{{ message.tags }}">
             {{ message }}
             </div>

          {% endfor %}
        {% endif %}

You can only achieve a timed dismiss with JS. However you can add a dismiss button with html & css. This answer may help: https://stackoverflow.com/questions/18611195/x-close-button-only-using-css — Anthony, Apr 04 '21 at 15:18

score 2 · Accepted Answer · answered Apr 04 '21 at 15:46

I show you an option that has helped me in some developments.

1.- Create a SetTimeout () function that will allow you to call a function or evaluate an expression after a specified number of milliseconds.

2.- Select the element with which we are going to interact $().

3.- Use fadeTo() to generate a fading effect.

4.- The SlideUp() Method allows us to hide the selected elements.

5.- Finally with remove() we eliminate the selected elements

Here I leave you the code

window.setTimeout(function() {
   $(".messages").fadeTo(400, 0).slideUp(400, function(){
     $(this).remove();
  });
}, 3000);

I hope this information be useful for you

Regards

How to make alert message disappear in Django

1 Answers1