莫代爾沒有出現在Javascript中，使用引導程序

-1

我想讓模態出現，當我點擊註冊。但問題是，模態沒有出現，雖然我已經檢查了很多次的代碼。剛使用時沒有其他內容的模式代碼工作得很好。源代碼來自W3Schools。我很抱歉代碼發生的方式，但如何stackoverflow文本編輯器工作是超越我。我是新來這個，所以如果這是一個愚蠢的錯誤莫代爾沒有出現在Javascript中，使用引導程序

<!DOCTYPE html> 
<html manifest="demo.htm.appcache"> 
<head> 
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet"> 

<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"> 
<link rel="stylesheet" href="main.css"> 
<link rel="icon" type="image.ico" href="Airbnb logo.ico"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter- 

bootstrap/3.3.5/js/bootstrap.js"></script> 
    <style> 
     @keyframes animatedBackground { 
    from { background-position: 0 0; } 
    to { background-position: 100% 0; } 
} 
     </style> 
    </head> 

    <body> 
     <div class="container"> 
      <div class="navbar"> 
     <ul class ="nav nav-pills"> 
      <li><a href="#">Name</a></li> 
      <li class="divider-vertical"></li> 
      <li><a href="#">Browse</a></li> 
      <li class="pull-right active"><a href="Airbnb.html">Homepage</a></li>  
      <li class="pull-right"> 
       <a href="#myModal" data-toggle="modal" data-target="#myModal">Sign Up</a> <!-- Modal is declared here --> 
      </li> 
      <li class="pull-right"><a href="Log%20in.htm" >Log In</a></li> 
      <li class="pull-right"><a href="Help.htm" >Help</a></li> 
     </ul> 
      </div> 
      </div> 






    <div class="jumbotron"> 
     <div class="container"> 
     <h1>Find a place to stay.</h1> 
     <p>Rent from people in over 34,000 cities and 192 countries.</p> 
     <a href="#">Learn More</a> 
     </div> 
    </div> 

    <div class ="neighborhood-guides"> 
      <h2>Neighbourhood Guides</h2> 
      <p>Not sure where to stay? We've created neighbourood guides for cities all around the world</p> 
      <div class="row"> 
       <div class ="col-md-4">   
       <div class ="thumbnail"> 
       <div class="zoom"> 
       <img src ="http://goo.gl/0sX3jq" class = "growImage" width="100px"> 
       </div> 
       </div> 
       <div class ="thumbnail"> 
       <div class="zoom"> 
       <img src ="http://goo.gl/an2HXY" class="growImage"> 
       </div> 
       </div> 
       </div> 
       <div class ="col-md-4">   
       <div class ="thumbnail"> 
        <div class="zoom"> 
        <img src = "http://goo.gl/Av1pac" class="growImage"> 
       </div> 
        </div> 
       <div class ="thumbnail"> 
        <div class="zoom"> 
        <img src ="http://goo.gl/vw43v1" class="growImage"> 
       </div>  
       </div> 
       </div> 
       <div class ="col-md-4">  
       <div class ="thumbnail"> 
        <div class="zoom"> 
       <img src ="http://goo.gl/0Kd7UO"> 
       </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="learn-more"> 
     <div class="container"> 

     <div class ="row"> 
      <div class= "col-md-4"> 
      <h3>Travel</h3> 
      <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p> 
      <p><a href="#">See how to travel on Airbnb</a></p> 
      </div> 
      <div class="col-md-4"> 
      <h3>Host</h3> 
      <p>Renting out your unused space could pay your bills or fund your next vacation.</p> 
      <p><a href="#">Learn more about hosting</a></p> 
      </div> 
      <div class ="col-md-4"> 
      <h3>Trust and Safety</h3> 
      <p>From Verified ID to our worldwide customer support team, we've got your back.</p> 
      <p><a href="#">Learn about trust at Airbnb</a></p> 
      </div> 
     </div> 
     </div> 
    </div> 
     <div class ="container"> 
    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 
    </div> 


     <script type="text/javascript">  

$(document).ready(function(){ 

    $('.zoom').mouseover(function(){ 
     //moving the div left a bit is completely optional 
     //but should have the effect of growing the image from the middle. 
     $(this).stop().animate({"width": "110%","left":"0px","top":"0px"}, 400,'swing'); 
    }).mouseout(function(){ 
     $(this).stop().animate({"width": "95%","left":"15px","top":"15px"}, 200,'swing'); 
    });; 
}); 
</script> 
    </body> 
</html>

來源

2015-06-25 Clarskon

只是一個快速的邊注...我抓住你的代碼並重新格式化它。最好從所有文件名中刪除空格。所以您的登錄頁面和圖標需要重新命名。我認爲這不會解決您的問題，但它可能有助於解決未來的其他問題。 – ph33nyx

@ ph33nyx好吧，我會在將來處理這個 – Clarskon

引導3.x的工作需要的jQuery的1.9.x或更高。

您的參考指向jQuery 1.3.2，它不適用於Bootstrap。

來源

2015-06-25 18:40:55 whipdancer

謝謝它的工作。 – Clarskon

很高興幫助！如果您覺得它有用，請隨時接受我的回答。 :-) – whipdancer

首發過，請不要炒我......我使用Chrome瀏覽器測試它，不能讓它的鏈接或按鈕的工作。但是，當我檢查控制檯我看到有一個JavaScript錯誤：

Failed to load resource: net::ERR_FILE_NOT_FOUND bootstrap.js:15 Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher

我把它升級到jQuery的1.10.2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

來源

2015-06-25 16:20:53 ph33nyx

如果你看看navibar div，你會發現模態。這也是在代碼 – Clarskon

道歉的意見！我沒有向下滾動。我將編輯我的答案。 – ph33nyx

莫代爾沒有出現在Javascript中，使用引導程序

回答

相關問題