I have developed a Python/Flask application and ran into an issue implementing a Bootstrap alert where the idea is to:
- dismissible via a close button.
- fade out and close after 2s if no action is taken.
Code
<div class="container">
{% for message in get_flashed_messages() %}
<script>
function close_alert()
{
document.getElementById("my_alert").close()
}
setTimeout("close_alert()", 2000)
</script>
<div id="my_alert" class="alert alert-primary alert-dismissible fade show" role="alert">
<strong>{{message}}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
</div>
I'm fairly new to Bootstrap and I would appreciate any support!
Thanks!
You can use the Bootstrap methods to achieve this. Take a look here at the bottom of the page for more info.
Logic
When the button is clicked jQuery removes the class
d-none
of the alert element which makes it visible. And then by usingsetTimeout()
JS will wait 2000ms before closing the alert withalert()
bootstrap 4 method.It will work for only one click.
Note: using Bootstrap 4 methods requires to work with jQuery.
With plain JavaScript
This code will show the alert every time the user clicks the button. In case you don't want that, you could use a Boolean or a session storage variable combined with a conditional statement to make it work only once.