javascript 为什么我的模态不显示？引导程序 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48493088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is my modal not showing? Bootstrap 4
提问by jskrtsth
<head>
<meta charset="utf-8" />
{% load staticfiles %}
<link rel='stylesheet' href="{% static 'homepage/css/bootstrap.min.css' %}">
<link rel='stylesheet' href="{% static 'homepage/css/element.css' %}">
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<style type="text/css">
html,
body {
height:100%;
font-family: 'Comfortaa', cursive;
padding-top: 100px;
}
header {
font-family: 'Comfortaa', cursive;
}
</style>
</head>
<header>
<nav class="navbar navbar-expand-lg navbar-inverse fixed-top" id="mainNav">
<div class="container-fluid">
<a class="navbar-brand logo" href="{% url 'index' %}"><img class="logo img" src="{% static 'homepage/img/leaves.png' %}">NAME</a>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'product_page' %}">ProductName`</a>
</li>
<li>
<p class="navbar-btn">
<a data-toggle="modal" href="#" data-target="#newsletterModal" class="btn btn-default">Newsletter</a>
</p>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="{% url 'store' %}">Store</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="{% url 'login' %}">Log In</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="modal fade" id="newsletterModal" tabindex="-1" role="dialog" aria-labelledby="newsletterModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"> ×</button>
<h4>Sign Up For Our Newsletter!</h4>
</div>
</div>
</div>
<div>
</header>
{% block content %}
{% endblock %}
I am trying to launch a modal when the newsletter button is clicked in the navbar but the modal is not showing. I followed some other stack overflow posts and tried to put the modal div outside the navbar among other tricks but nothing seems to be working. Any suggestions?
我正在尝试在导航栏中单击通讯按钮时启动模态，但该模态未显示。我关注了其他一些堆栈溢出帖子，并尝试将模态 div 放在导航栏之外，还有其他技巧，但似乎没有任何效果。有什么建议？
Any other suggestions with my code would also be appreciated. Thanks!
对我的代码的任何其他建议也将不胜感激。谢谢！
回答by WebDevBooster
Just tested your modal and it's working fine. The only possible reason is that you either aren't loading one of the following files OR you are loading an outdated version of some of them.
刚刚测试了你的模态，它工作正常。唯一可能的原因是您没有加载以下文件之一，或者您正在加载其中一些文件的过时版本。
So, make you sure you are loading all of the following files (in that order):
因此，请确保您正在加载以下所有文件（按此顺序）：
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>And also make sure that you are loading (in the head section) an up-to-date version of the css which is this:
还要确保您正在加载（在头部部分）最新版本的 css，它是这样的：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">