单击“x”按钮时烧瓶闪烁消息未关闭答案

【问题标题】：Flask flash message not closing on clicking the 'x' button单击“x”按钮时烧瓶闪烁消息未关闭
【发布时间】：2020-09-07 09:45:02
【问题描述】：

我有一个用于用户登录和更改密码的烧瓶 python 代码。当我更改密码时，无论密码是否正确更改，我都需要闪烁一条消息。

{% with messages = get_flashed_messages() %}
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-primary alert-dismissible fade show" role="alert">
                        <span>{{ message }}</span>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                {% endfor %}
            {% endif %}
          {% endwith %}

我已经使用上面的代码 sn-p 来闪烁消息。我的问题是，当我单击“X”图标关闭消息时，我什么也不做。谁能告诉我我做错了什么？还有可能让警报消息超时（即警报消息在几秒钟后消失？）如果是，那么如何？

注意：我在 Javascript 或任何其他方法方面的经验为零。请仅通过 HTML、CSS 或 python 给我答案。谢谢

【问题讨论】：

标签： html css python-3.x flask flash-message

【解决方案1】：

我刚刚遇到这个问题。我猜你缺少包括引导 css/js 资产以及 jquery 的内容。

【讨论】：

【解决方案2】：

没有看到您的代码的其余部分，我只能假设这里的问题与我的相似。

当我开始看到 Flash 消息未关闭甚至关闭按钮本身未正确放置的问题时，我正在关注一个过时的教程。解决方案是在引导指令页面上重新检查 CSS 和 JS 的依赖关系。我使用的 jQuery 版本显然与 Bootstrap 4 不兼容。

https://getbootstrap.com/docs/4.0/getting-started/introduction/

CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

【讨论】：