我遇到一个令人沮丧的问题。我的模态无法打开。我在浏览器的左下方有一个“ localhost：8888 / book /＃rollrModal”白框，仅此而已。并且没有控制台警告等。这是带有相关代码的JSFiddle：https ://jsfiddle.net/m78ws866/这是我要使用以下方式打开模式的链接的代码：
<a href="#rollrModal" data-toggle="modal" data-target="#rollrModal">
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="square" style="background: url('book/RollrText.png'); background-size: 100% 100%;"></div>
<p>Rollr</p>
</div>
</a>
这是模态的代码：
<div class="modal fade" id="rollrModal" tabindex="-1" role="dialog" aria-labelledby="rollrModalLabel" aria-hidden="true" style="z-index: 900; position: fixed;">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
现在是空的，因为我从bootstrap网站上复制粘贴了它，这就是为什么这让我感到沮丧。
更多细节可能至关重要：我的网站在index.php主目录中设置了很多php链接，用于组织目的（我不确定这是否是传统的组织方法）。
代码的第一部分位于一个名为“ chapter2.php”的php文件中，并链接在body标签中。第二位在名为“ rollr.php”的文件中，并链接在body标签上方。它最初是在body标签内，但没有用，我在某处阅读以尝试将其放在体外。
而且，整个身体旋转了-.3deg以达到效果，但它没有引起任何先前的问题。刚打开主体后，还有一个覆盖的不透明垃圾效果div（固定，宽度和高度为100％，不可单击，因此可以单击和突出显示文本和链接）。这就是为什么我尝试将“ z-index：900”与模式一起使用来解决此问题的原因。身体的z指数为400，垃圾覆盖指数为500。
如果重要的话，这是我的Bootstrap和JQuery链接。
<!-- BOOTSTRAP -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
之前，我在上一个网站上使用过模式。我使用完全相同的语法，并且它们无缝地工作。http://www.curtisbell.me
通常，在诉诸在线论坛后，我会找到解决问题的方法，但是这个问题只是停滞不前。
任何帮助将不胜感激！<3
您需要使用引导JS：
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
将block元素放入内联元素（）div内也是不正确的a。我建议删除这些，但在此答案中我不会这样做。
这是一个工作片段：
<!-- BOOTSTRAP -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- BOOTSTRAP JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a href="#rollrModal" data-toggle="modal" data-target="#rollrModal">
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="square" style="background: url('book/RollrText.png'); background-size: 100% 100%;"></div>
<p>Rollr</p>
</div>
</a>
<div class="modal fade" id="rollrModal" tabindex="-1" role="dialog" aria-labelledby="rollrModalLabel" aria-hidden="true" style="z-index: 900; position: fixed;">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句