烧瓶关闭闪存消息

Question

我的Flask应用程序中有这样的 Flash 消息：

我想如果我点击关闭图标，闪烁的消息就会关闭，或者在一段时间内自动关闭，例如：5秒后它会自动关闭。

这是我的_flash.html

{% macro render_flashes(class) %}
    {% with msgs = get_flashed_messages(category_filter=[class]) %}
        {% for msg in msgs %}
            <div class="ui {{ class }} message">
                <i class="close icon"></i>
                {{ msg }}
            </div>
        {% endfor %}
    {% endwith %}
{% endmacro %}

<div class="ui text container">
    <div class="flashes">
        {{ render_flashes('error') }}
        {{ render_flashes('warning') }}
        {{ render_flashes('info') }}
        {{ render_flashes('success') }}
    </div>
</div>

那么我需要如何改进我的代码才能做到这一点......？

PS：有关更多信息，我使用这个很好的样板。

Answer 1

您可以使用 jQuery 来完成此操作。向按钮添加 onclick 函数，如下所示：

<i class="close icon" onclick=delete_flash(this)></i>

这是要删除的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    function delete_flash(flash){
        $(flash).parent().remove()
    }
</script>