使用Jinja模板时，引导模态无法正确显示 [英] Bootstrap modals not showing correctly when using Jinja templates
问题描述
虽然使用Jinja模板，但是Bootstrap模态无法正确显示.它们要么显示而不禁用背景，要么显示禁用(并且无法关闭).包含CSS z-index无效.更改JavaScript代码以手动打开模式无法正常工作.
While using Jinja templates, Bootstrap modals do not show properly. Either they show without disabling the background or they show disabled (and can't be closed). Including a CSS z-index didn't work. Changing the JavaScript code to open the modal manually didn't work.
推荐答案
所有模态都需要放置在<body>之外.如果将模态放在主jinja2 {%block content%}内，则它们的行为往往会很奇怪.请尝试以下操作:
All modals need to be placed outside of your <body>. If you place the modals inside of your main jinja2 {%block content%}, they have a tendency to behave oddly. Try the following:
template.html-这是您的主要jinja2模板
template.html- this is your main jinja2 template
<!DOCTYPE html>
<html lang="en">
<head>
enter code here
</head>
<body>
{% block content %}
{% endblock %}
</body>
{%block modals%}
{%endblock%}
</html>
然后在您的子页面上，在页面底部的{%endblock content%}之后加上以下html:
Then on your child page, include the html below at the bottom of the page, after {%endblock content%}:
{%block modals%}
<!-- Your modals go here -->
{%endblock%}
这篇关于使用Jinja模板时，引导模态无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
