从 Jinja2 模板调用模态 (Bootstrap 5)

Question

我可能是第 n 个问这个问题但在解析相关文档时遇到问题的人；我想在 Jinja2 中用函数声明的按钮添加模式对话框。

我希望调用模态的表单代码如下 - 当按下关闭按钮（最后一行）时应调用模态，以确认此操作。

 <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") }}

模态对话称为'Shutdown Confirmation'，稍后声明。我不确定如何调用它，因为在线示例显示使用了按钮声明而不是 {{。这是 bootstrap 文档：

<button type="button" class="btn btn-primary" data-bs- 
toggle="modal" data-bs-target="#exampleModal">
   Launch demo modal
</button>

Answer 1

使用Bootstrap5可以通过数据属性或JS激活模态面板API。我假设您想使用 data-attribute 方法。

使用 WTForms，您可以将任何属性传递给呈现的元素，只需将任何破折号替换为下划线（因为 Python 语法），WTForms 会将它们改回破折号：

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

将 #exampleModal 更改为模态元素的相应选择器。我们还将按钮的类型从默认的 submit 更改为简单的 button，因此它不会提交表单，只需打开模态 window.

从 Jinja2 模板调用模态 (Bootstrap 5)

Call a modal (Bootstrap 5) from Jinja2 templating

flask

jinja2

bootstrap-modal