javascript - flask 关闭闪存消息

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:有关更多信息，我很好地使用了这个 boilerplate .

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>