php - Bootstrap 模式无法正常运行

Question

我遇到了一个令人沮丧的问题。 我的模式打不开。 我在浏览器左下角看到一个“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 标记内部，但这不起作用，我在某处读到尝试将其放在 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

Answer 1

您需要使用 Bootstrap JS:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

将 block 元素放入内联元素(a 内的 div)也是不正确的。我建议删除这些内容，但我不会在这个答案中这样做。

这是一个工作片段:

<!-- 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>