为什么我的模式行不通

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>

来源

2015-07-28 Dwayne B

您的代码中存在拼写错误：'var img =' D4V1D

首先，确定你的html验证，https：//validator.w3.org/是一个体面的工具，只需复制粘贴就可以了。然后请点击F12并使用开发者控制台（或者如果该按钮不执行任何操作，可以谷歌浏览器名称+开发控制台），并告诉我们网络或控制台视图中是否有错误消息。最有可能的是它的路径问题或简单的错字 - 这两者都应该在开发控制台中生成可见的错误消息。如果没有错误，可以制作一个jsfiddle，以便我们可以使用您使用的文件进行测试（您可以上传jsfiddle中的任何资源，非常容易）。 –

开发者控制台中有三个错误。第一个是与导航栏相关的“GET”错误，假设不会停止模式。其次是“http：//localhost/woody/js/ie-emulation-modes-warning.js”的“GET”错误---再一次，这不会导致模式无法加载，我认为。最后“Uncaught ReferenceError：$ is not defined”....然后当你点击右边的链接时，它会在这行的末尾放置一个“x”$（document）.ready（function（）{“ –

这是你的更正后的代码：

<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 你的剧本。

来源

2015-07-28 08:10:19 D4V1D

你甚至可以通过改正typeO它并没有帮助，我甚至复制和粘贴你的代码 –

那么你现在面临什么问题？控制台有什么错误？ – D4V1D

大声笑你的小记事“还要确保jquery在脚本“是问题所在，我在底部使用引导带告诉你放在身体末端的js脚本，然后用其他链接的脚本和链接的CSS移动到头部。和eveything工作。非常感谢你！ –

看起来像没有加载为你错过了=在下面一行

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

来源

2015-07-28 08:07:54 manoj

$(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/

来源

2015-07-28 08:34:22

一个很大的问题可能是，你是你的脚本

脚本后加载jQuery库在body标签的结束不会运行，因为$未定义，直到稍后加载jQuery库

来源

2015-07-28 08:38:21

为什么我的模式行不通

回答

相关问题