Jinja2模式弹出窗口(引导程序5)没有出现，没有错误

Question

我看到了这个问题的几个版本，但没有一个版本的参数完全相同，也没有适合我的解决方案，所以下面是：在Jinja2模板中，我在表单中调用一个模式弹出窗口，以确认外围设备的关闭。问题是模式弹出1。不显示和2。在终端或日志中没有任何输出。

模式调用的代码(其他中的最后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文档使用了模态的默认实例化。我还确保请求了所需的库(JQuery、Bootstrap(，并将语法从bs_data_toggle更改为data_toggle(也用于触发器(，但两者都不起作用。

如果这是足够的信息，请告诉我！我是网络开发的新手，如果有任何正确的指导，我将不胜感激。谢谢，H.

第页。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>

第页。S(2(：相关的CSS/JS包含。在头内，以下是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语法(和文档(用于模态。新版本中有一个变化：data属性得到了-bs-后缀(而不是前缀(。因此，我们必须使用例如data-bs-toggleHTML属性来将信息传递给Bootstrap:

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