不使用按钮如何切换Bootstrap Modal？适配Flask/Jinja模板场景

架构老林

2026-10-2

实现方法

核心逻辑：Jinja 是服务端渲染模板，你需要将触发模态框的 JS 代码通过 Jinja 条件判断渲染到页面中，等浏览器加载完成后自动执行。

前置要求

确保页面已正确引入对应版本的 Bootstrap JS 依赖：

如果你用的是依赖 jQuery 的 Bootstrap 版本（Bootstrap 4 及更早，或 Bootstrap 5 的 jQuery 兼容版），需先引入 jQuery 再引入 Bootstrap JS
如果你用的是 Bootstrap 5 原生 JS 版本，直接引入官方 Bootstrap JS 即可

写法1：jQuery 版（匹配你查到的官方文档写法）

在模板中 Bootstrap 依赖引入的后面，添加如下代码：

<script>
{% for message in get_flashed_messages() %}
// 触发id为exampleModal的模态框显示
$('#exampleModal').modal('show');
// 可选：将flash消息填充到模态框的内容区域，escapejs过滤避免特殊字符导致JS报错
$('#exampleModal .modal-body').text('{{ message|escapejs }}');
{% endfor %}
</script>

如果需要实现切换效果（当前隐藏就显示，当前显示就隐藏），把`modal('show')`改为`modal('toggle')`即可。

写法2：Bootstrap 5 原生 JS 版（无需jQuery）

如果你的项目没有引入jQuery，用Bootstrap 5原生API的写法如下：

<script>
{% for message in get_flashed_messages() %}
// 初始化模态框实例
const exampleModalEl = document.getElementById('exampleModal');
const exampleModal = bootstrap.Modal.getOrCreateInstance(exampleModalEl);
// 显示模态框，要切换效果就调用.toggle()
exampleModal.show();
// 可选：填充消息内容
document.querySelector('#exampleModal .modal-body').textContent = '{{ message|escapejs }}';
{% endfor %}
</script>