Bootstrap Modal没有出现-Jinja2 [英] Bootstrap Modal not appearing - jinja2
问题描述
我是第一个问类似问题的人，所以我敢肯定这很简单.
I'm the thousandth person to ask a similar question, so I'm certain it's something simple.
首次在Chrome中使用boostrap/jinja.简而言之，按钮在那里，但是单击它却无济于事.数据完全可以从Jinja填充，并且Jinja可以正确地渲染for循环，并在目标调用和div ID之间匹配ID.
First time working with boostrap / jinja in Chrome. Simply put, the button is there, but clicking it does nothing. The data is all populating from Jinja just fine, and the jinja is rendering out the for loops properly, with matching id's between target calls and div id's.
**按照查看此URL的建议进行操作后: https: //getbootstrap.com/docs/5.0/components/modal/#usage 并剪切并粘贴示例实时演示"那也不起作用.可能是我所缺少的环境问题吗?
** After following the suggestion of looking at this URL: https://getbootstrap.com/docs/5.0/components/modal/#usage and cutting and pasting the sample "live demo" that isn't working either. Could be something environmental I'm missing?
<!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，我可以看到两个主要问题.
Based on your generated HTML, I can see two main issues.
您的id属性包含非标准字符，这通常会导致诸如Bootstrap之类的库出现问题.请熟悉文档:
Your id attributes contain non-standard characters, which often cause problems for libraries like Bootstrap. Please familiarize yourself with the documentation:
使用除ASCII字母，数字，"_"，-"和."以外的字符.可能 导致兼容性问题
Using characters except ASCII letters, digits, '_', '-' and '.' may cause compatibility problems
从id属性，应该可以解决此问题.
Remove the non-standard characters (such as (, ), /, , and what appear to be non-ASCII smart quotes (" and ")) from your id attributes, which should solve this problem.
另一个问题是，您生成的HTML似乎根本没有在任何地方加载Bootstrap CSS或JS.没有JS，模态将无能为力. JS是使模态出现的原因.
The other issue is that your generated HTML doesn't seem to have the Bootstrap CSS or JS loaded anywhere at all. Without the JS, the modals wouldn't do anything. The JS is what makes the modals appear.
您需要在开始时加载它们，以及与Bootstrap有关的jQuery.
You need to load these at the start, along with jQuery which is a dependancy for Bootstrap.
<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">
这篇关于Bootstrap Modal没有出现-Jinja2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
