爲什麼我的模式行不通

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

爲什麼我的模式行不通

回答

相關問題