Jinja2 模态弹出窗口 (Bootstrap 5) 没有出现，没有错误

Question

我看过这个问题的几个版本，但 none 具有完全相同的参数或适合我的解决方案，所以这里是：在 Jinja2 模板中，我以一种形式调用模式弹出窗口，以确认外围设备的关闭。问题是模态弹出窗口 1. 不显示并且 2. 没有在终端或日志中输出任何内容。

模态调用代码（else最后两行）：

 <form class="form form-horizontal" method="post" role="form" style="text-align: center;">
                    {{ power_form.hidden_tag() }}
                    
                    {% if power_status == "None" %}
                    {{ power_form.power_on(class_="btn btn-default") }}
                    {{ power_form.power_cycle(class_="btn btn-default") }}
                    {{ power_form.power_off(class_="btn btn-default") }}

                    {% else %}
                    {{ power_form.power_on(class_="btn btn-success") }}
                    {{ power_form.power_cycle(class_="btn btn-warning") }}
                    {{ power_form.power_off(type="button", class_="btn btn-danger", 
                    data_toggle="modal", data_target="#modalConfirm") }}

                    {% endif %}
                </form>

我检查过 Flask 中的函数允许 POST 和 GET 调用，并根据 Bootstrap documentation. 使用模态的默认实例化我还确保所需的库（JQuery, Bootstrap) 被请求，并将语法从 bs_data_toggle 更改为 data_toggle （对于触发器也是如此），两者都不起作用。

请告诉我这些信息是否足够！我对 web 开发还很陌生，如果有任何正确方向的指示，我将不胜感激。谢谢，H.

P.S：这是模态的代码：

<div class="modal fade" id="modalConfirm" tabindex="-1" aria-labelledby="modalConfirmLabel" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="modalConfirmLabel">Shutdown Confirmation</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div>
</div>

P.S (2): 相关的CSS / JS 夹杂物。在 head 中，这里有 CSS 包括：

<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet" />
 <link href="{{ url_for('static', filename='css/light-bootstrap-dashboard.css') }}" rel="stylesheet" />
 <link href="{{ url_for('static', filename='css/spectrum.css') }}" rel="stylesheet"/>

在正文之后的单独脚本块中，JS 包括：

 <script src="{{ url_for('static', 
  filename='js/core/jquery.3.2.1.min.js') }}" type="text/javascript"> 
 </script>
 <script src="{{ url_for('static', filename='js/core/popper.min.js') }}" 
 type="text/javascript"></script>
 <script src="{{ url_for('static', filename='js/core/bootstrap.min.js') 
 }}" type="text/javascript"></script>

Answer 1

您已经包含了 Bootstrap v5 库，但不小心将 v4 语法（和文档）用于模态。有一个 change in the new version：data 属性有一个 -bs- 后缀（不是前缀）。所以我们必须使用例如data-bs-toggle HTML 属性将信息传递给 Bootstrap:

{{ power_form.power_off(type="button", class_="btn btn-danger", 
                        data_bs_toggle="modal", data_bs_target="#modalConfirm") }}

Jinja2 模态弹出窗口 (Bootstrap 5) 没有出现，没有错误

Jinja2 modal popup (Bootstrap 5) not appearing, no error

jinja2

flask

flask-wtforms

bootstrap-modal