Question

我有一个令人沮丧的问题。我的模态不会打开。我得到了一个本地主机：8888 / book /＃rollrModal＆＃39;我的浏览器左下方的白框，但这就是全部。没有控制台警告等。这是一个包含相关代码的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链接，用于组织目的（我不确定这是否是传统的组织方法）。

第一段代码位于名为＆＃39; chapter2.php＆＃39;的php文件中，并在body标签中链接。第二位位于名为＆＃39; rollr.php＆＃39;的文件中，并链接在body标签上方。它最初是在身体标签内部，但是它不起作用，我在某个地方尝试将它放在身体外。

此外，为了效果，整个身体旋转-3度，但它没有引起任何先前的问题。在身体打开后，还有一个重叠的不透明垃圾效果div（固定，100％宽度和高度，不可点击，因此可以点击和突出显示文本和链接）。这就是为什么我尝试使用＆＃39; z-index：900＆＃39;用模态来解决问题。正文的z-index为400，而grunge叠加指数为500。

这是我的Bootstrap＆amp; 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

通常在尝试在在线论坛上发帖之后，我找到解决问题的方法，但这个问题很简单，停滞不前。

任何帮助将不胜感激！＆LT; 3

Answer 1

你需要使用bootstrap JS：

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

将块元素放在内联元素（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>

Bootstrap模式无法正常运行

1 个答案: