If the user is not logged in the popup is not interactable but once the user logs in it can be interacted with, not sure why this actually happens and it doesn't seem like it's a JavaScript problem, couldn't find any solutions to it by searching around. I wonder what could cause this behavior on Flask
HTML + Jinja2 :
<body>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
{% if category == "soft-error" %}
<div class="toast" id="toast">
<div class="toast-content">
<div class="close-btn">
<a class="wa-close icon-pos" id="close-btn"></a>
</div>
<div class="message">
<div class="text-content">
<p class="text text-1" id="txt-hide">Error</p>
<span class="text text-2" id="txt-hide-2">{{ message }}</span>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}{% endblock%}
</body>
JavaScript :
const closeBtn = document.getElementById('close-btn');
const toast = document.getElementById("toast");
closeBtn.addEventListener('click', () => {
toast.parentNode.removeChild(toast);
});
setTimeout(function() {
toast.parentNode.removeChild(toast);
}, 5000);