'Django snackbar like message

What's the best way to have a custom tag with Django messages which disappears after a few seconds

This is how I did it

I know i am late, but i did it as follows

views.py

CRITICAL = 50

def my_view(request):
    messages.add_message(request, CRITICAL, 'A serious error occurred.')

messages.html

  {% if message.level == 50 %}
  <div class="snackbar">{{message}}</div>
  </div>
  {% else %}
{{ message }}

CSS

.snackbar {
    display: block;
    min-width: auto;
    margin-left: auto;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 74%;
    bottom: 30px;
    -webkit-animation: cssAnimation 8s forwards;
    animation: cssAnimation 8s forwards;
}
@keyframes cssAnimation {
    0% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes cssAnimation {
    0% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

Tho this works, looking if there's any better way out there



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source