Question

我正在尝试复制此代码以了解启动带的工作原理： 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>';

这是我使用的小提琴链接部分：

    <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依赖于它来处理各种动画，例如您正在使用的show fade模式。

Answer 2

是的，您需要使用Jquery.min.js和Bootstrap.js以及Bootstrap.css

<强> Demo

<input type="image" id="btn1" src="https://www.google.co.in/search?q=image&es_sm=93&source=lnms&tbm=isch&sa=X&ei=GM85VfaUA8vs8AWZ0IC4AQ&ved=0CAcQ_AUoAQ&biw=1366&bih=653#tbm=isch&q=button&imgrc=Bi3BrxfrMargwM%253A%3BChPBZrkfIvNRmM%3Bhttp%253A%252F%252Fmygimptutorial.com%252Fimages%252Fbutton-with-reflection%252F11.jpg%3Bhttp%253A%252F%252Fmygimptutorial.com%252Fweb-20-button-with-reflection%3B498%3B169" alt="Submit" width="48" height="48">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
               This Modal title
            </h4>
         </div>
         <div class="modal-body">
            Add some text here
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">Close
            </button>
            <button type="button" class="btn btn-primary">
               Submit changes
            </button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->

       <div>

$('#btn1').click(function(){

     $('#myModal').modal('show');
    });

Answer 3

最后，一个包含所有代码的链接使其更容易理解：

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php

尝试使用靴带

3 个答案: