莫代尔没有出现在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中，使用引导程序

回答

相关问题