Jinja2 模态弹出窗口（Bootstrap 5）没有出现，没有错误

Question

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

模态调用的代码（else 中的最后 2 行）：

 <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-toggleHTML 属性将信息传递给 Bootstrap：

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