jquery - Modal not appearing in Javascript, Using Bootstrap -
i want make modal appear when click on sign up. problem modal not appearing although have checked code many times. modal code when used without other content works fine. source code w3schools. sorry in advance way code occurs, how stackoverflow text editor works beyond me. new this,so please don't fry me if it's idiotic mistake
<!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 { { background-position: 0 0; } { 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 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 place stay.</h1> <p>rent people in on 34,000 cities , 192 countries.</p> <a href="#">learn more</a> </div> </div> <div class ="neighborhood-guides"> <h2>neighbourhood guides</h2> <p>not sure stay? we've created neighbourood guides cities around 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 , rooms treehouses , boats: stay in unique spaces in 192 countries.</p> <p><a href="#">see how travel on airbnb</a></p> </div> <div class="col-md-4"> <h3>host</h3> <p>renting out unused space pay bills or fund next vacation.</p> <p><a href="#">learn more hosting</a></p> </div> <div class ="col-md-4"> <h3>trust , safety</h3> <p>from verified id our worldwide customer support team, we've got back.</p> <p><a href="#">learn trust @ 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">×</button> <h4 class="modal-title">modal header</h4> </div> <div class="modal-body"> <p>some text in 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 div left bit optional //but should have effect of growing image 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>
bootstrap 3.x requires jquery 1.9.x or higher.
your reference points jquery 1.3.2, not work bootstrap.
Comments
Post a Comment