为什么我的模态不起作用答案

【问题标题】：Why will my modal not work为什么我的模态不起作用
【发布时间】：2015-07-28 08:01:50
【问题描述】：

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>

【问题讨论】：

您的代码中有一个错字：var img = '<img src="'（注意src=）。
首先，一定要验证您的 html，validator.w3.org 是一个不错的工具，只需复制粘贴即可。然后请单击 F12 并使用开发者控制台（如果该按钮没有任何作用，则使用谷歌浏览器名称 + 开发者控制台）并告诉我们网络或控制台视图中是否有任何错误消息。很可能是路径问题或简单的拼写错误 - 两者都应该在开发控制台中生成可见的错误消息。如果没有错误，可以制作一个 jsfiddle，以便我们使用您使用的文件对其进行测试（您可以在 jsfiddle 中上传任何资源，非常容易做到）。
开发者控制台出现三个错误。第一个是与导航栏有关的“GET”错误，假设那没有停止模式。其次是“localhost/woody/js/ie-emulation-modes-warning.js"---”的“GET”错误，我认为这不会导致模式无法加载。最后是“Uncaught ReferenceError: $ is not defined”....然后当您单击右侧的链接时在这一行的末尾放一个“x”” $(document).ready(function(){"

标签： javascript jquery twitter-bootstrap modal-dialog

【解决方案1】：

这是您更正后的代码：

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

【讨论】：

谢谢，但即使纠正 typeO 也无济于事。我什至复制并粘贴了您的代码。
那么您现在面临什么问题？控制台出现什么错误？
大声笑你的小笔记“还要确保 jquery 在脚本之前”是问题所在。我在底部有引导带告诉你放在身体末端的 js 脚本。我将它与其他链接的脚本和链接的 css 一起移到了头部。重新运行页面，一切正常。非常感谢！！！

【解决方案2】：

看起来图像没有加载，因为您错过了下面一行中的=

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

【讨论】：

【解决方案3】：

$(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');
  });
});

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

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

【讨论】：

【解决方案4】：

一个大问题可能是您在脚本之后的 body 标记末尾加载 jQuery 库

你的脚本不会运行，因为 $ 在稍后加载 jQuery 库之前是未定义的

【讨论】：