jquery - 尝试使用 Bootstrap 带

Question

我正在尝试复制此代码以了解 Bootstrap 带的工作原理: JSFiddle

然而，我使用的不是按钮，而是图像。当我单击它突出显示的图像时，但模态不显示。我一直在研究来自不同来源的模态示例，它们都是不同的。我似乎无法将它们中的任何一个应用到工作中。

我应该使用 jquery 来实际显示模式吗？ (jsfiddle 不包含任何 js 或 jquery)。

我有以下内容:

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" /></script>
    <script src="bootstrap.min.js"/>
        <script type="text/javascript">
        $(document).ready(function() {
            $("body").css("display", "none");
            $("body").fadeIn(1000);
            $("a.transition").click(function(event){
                event.preventDefault();
                linkLocation = this.href;
                $("body").fadeOut(1000, redirectPage);      
            });
            function redirectPage() {
                window.location = linkLocation;
            }
        });

    </script>

    print '<li>';
         print '<a data-toggle="modal" href="#myModal" class="btn"><img src="'.$row["image"].'" /></a>';
         print '<h4>'.$row['time'].'</h4>';
    print '</li>';

这是我在 fiddle 链接中使用的部分:

    <div id="myModal" class="modal hide fade" style="display: none; ">
        <div class="modal-header">
          <button class="close" data-dismiss="modal">×</button>
          <h3>Modal Heading</h3>
        </div>
        <div class="modal-body">
          <h4>Text in a modal</h4>
          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>

          <h4>Popover in a modal</h4>
          <p>This <a href="#" class="btn popover-test" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on hover.</p>

          <h4>Tooltips in a modal</h4>
          <p><a href="#" class="tooltip-test" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>
        </div>
        <div class="modal-footer">
          <a href="#" class="btn" data-dismiss="modal">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div>

我不明白为什么模态没有显示。有这么多不同的资源，非常困惑。

Answer 1

是的，您确实需要包含 jQuery，因为 bootstrap 依赖于它来实现各种动画，例如您正在使用的显示淡入淡出模式。