我是问类似问题的第一千个人，所以我确信这很简单。
第一次在 Chrome 中使用 boostrap / jinja。简单地说，按钮在那里，但点击它没有任何作用。数据全部从 Jinja 填充，并且 jinja 正确渲染 for 循环，在目标调用和 div id 之间匹配 id。
**编辑：按照查看此 URL 的建议后：https://getbootstrap.com/docs/5.0/components/modal/#usage https://getbootstrap.com/docs/5.0/components/modal/#usage并剪切和粘贴也不起作用的示例“现场演示”。可能是我缺少的环境因素吗？
<!DOCTYPE html>
<html lang="en">
<html>
<head>
</head>
<body>
{% block content %}
<table>
<tr>
<td>
{% for loc, content in variant.location.items() %}
{% set modal_id = day.header + item_name +variant.variant_name %}
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#{{modal_id}}">{{ loc }} : {{ content.quantity }}</button>
{% endfor %}
</td>
</tr>
</table>
{% endblock %}
</body>
{%block modals%}
{% for loc, content in variant.location.items() %}
{% set modal_id = day.header + item_name + variant.variant_name %}
<!-- Modal -->
<div id="{{ modal_id }}" class="modal fade" role="dialog" style="z-index: 10000000">
<div class="modal-dialog">
<div classs="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<p>STUFF</p>
</div>
</div>
</div>
</div>
{% endfor %}
{%endblock%}
</html>
根据您生成的 HTML，我可以看到两个主要问题。
Your id属性包含非标准字符，这通常会给 Bootstrap 等库带来问题。请熟悉文档 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id:
使用除 ASCII 字母、数字、“_”、“-”和“.”之外的字符可能
导致兼容性问题
删除非标准字符（例如(, ), /, ,以及看似非 ASCII 的智能引号 (“ and ”）） 从你的id属性，应该可以解决这个问题。
另一个问题是您生成的 HTML 似乎根本没有加载 Bootstrap CSS 或 JS。没有 JS，模态框就不会做任何事情。 JS 使模态框出现。
您需要在开始时加载它们，以及 Bootstrap 的依赖项 jQuery。
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
