Question

Ok I have been following the tutorial here:

http://fearlessflyer.com/create-a-responsive-photo-gallery-with-bootstrap-framework/

我相信我没有错过任何东西，当我点击Chrome中的图像时，他们不会在模态中打开。

任何想法??

以下是我的代码......谢谢

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <meta name="viewport" content="height=device-height, initial-scale=1"> -->
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="images/matco.ico">

    <title>Woody's Tool Box</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <link href="navbar-fixed-top.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <link href="css/products.css" rel="stylesheet">

    <script src="js/ie-emulation-modes-warning.js"></script>


  </head>

<body>

    <div class="container">
        <ul>
            <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"><img src="images/matco1.jpg" class="img-responsive"></li>
            <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"><img src="images/DSC01460.jpg" class="img-responsive"></li>
            <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"><img src="images/MatcoCart.jpg" class="img-responsive"></li>
        </ul>
    </div>

    <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-body">

                </div>  <!-- modal body -->
            </div>  <!-- modal content -->
        </div>  <!-- modal dialog -->
    </div>  <!-- modal -->

    <script>  
        $(document).ready(function(){
            $('li img').on('click',function(){
                var src = $(this).attr('src');
                var img = '<img src"' + src + '" class="img-responsive"/>';
                $('#myModal').modal();
                $('#myModal').on('show.bs.modal', function(){
                    $('#myModal .modal-body').html(img);
                });
                $('#myModal').on('hidden.bs.modal', function(){
                    $('#myModal .modal-body').html(' ');
                });
            });
        });

    </script>

    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>  
</body>

Answer 1

看起来图片未加载，因为您错过了下面一行的=

 var img = '<img src="' + src + '" class="img-responsive"/>';
                    ^^------------here

Answer 2

以下是您更正后的代码：

<script>  
    $(document).ready(function(){
        $('li').find('img').on('click',function(){
            var src = $(this).attr('src');
            var img = '<img src="' + src + '" class="img-responsive"/>'; // notice the src="
            $('#myModal').on('show.bs.modal', function(){
                $(this).find('.modal-body').html(img);
            }).on('hidden.bs.modal', function(){
                $(this).find('.modal-body').html(' ');
            }).modal(); // you can chain all your functions here
        });
    });

</script>

另外，请务必在之前添加jQuery 。

Answer 3

＆＃13;

$(document).ready(function() {
  var currentImg = {};


  $('#myModal').on('show.bs.modal', function() {
    $('#myModal .modal-body').append(currentImg);
  });

  $('#myModal').on('hidden.bs.modal', function() {
    $(currentImg).remove();
  });

  $('li img').on('click', function() {
    var src = $(this).attr('src');

    var img = document.createElement('img');

    img.src = src;

    img.setAttribute('class', 'img-responsive');

    currentImg = img;

    $('#myModal').modal('show');
  });
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <ul>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <img src="http://www.dphotographer.co.uk/users/22969/thm1024/1337274447_3%20sisters%20sharpened%20with%20Nik.jpg" class="img-responsive">
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <img src="https://c1.staticflickr.com/1/379/18466788664_049a127406_b.jpg" class="img-responsive">
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <img src="https://c2.staticflickr.com/4/3247/3140154272_85ca82c4f5_b.jpg" class="img-responsive">
    </li>
  </ul>
</div>
<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-body"></div>
      <!-- modal body -->
    </div>
    <!-- modal content -->
  </div>
  <!-- modal dialog -->
</div>
<!-- modal -->

＆＃13;

你去了：http://jsfiddle.net/5okna07j/

Answer 4

一个大问题可能是您在脚本

之后在body标记的末尾加载了jQuery库

你的脚本不会运行，因为$未定义，直到稍后加载jQuery库

为什么我的模态不起作用

4 个答案: