Geek Answers Handbook

Bootstrap popup window not working?

The Bootstrap popup does not work for me. I did everything right, as you can see it there:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Test site | Jony</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Testing website coded by Jony - rapture-gfx" /> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"/> <link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'><link rel="stylesheet" href="css/flexslider.css" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="js/jquery.flexslider.js"></script><!-- Place in the <head>, after the three links --> <script type="text/javascript" charset="utf-8">$(window).load(function() { $('.flexslider').flexslider({ animation: "slide" });});</script> <link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="js/jquery.flexslider.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.lavalamp-1.4.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript"> $('.dropdown-toggle').dropdown() </script> </head> <header> <div class="header"> <div class="container"> <ul class="menu"> <li class="current"><span style="color: #bde2e1;">Home</li> <li class="dropdown"><a class="dropdown-toggle" href="#">Servers</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li class="hovering"><a href="#">Portfolio</a></li> <li class="hovering"><a href="#">Releases</a></li> <li class="hovering"><a href="#">Contact</a></li> </ul> </li> <li class="hovering"><a href="#">Portfolio</a></li> <li class="hovering"><a href="#">Releases</a></li> <li class="hovering"><a href="#">Contact</a></li> </ul>

Bootstrap is a ready-made infrastructure with features such as grid, lines, ready-made js menus and much more.

There is an explanation of how this works:

http://twitter.github.com/bootstrap/javascript.html#dropdowns This does not work for me.

Yes, my src correctly reference JS files.

+4
source share
2 answers

your missing body in your html.

put your script at the bottom of the page or after ready:

 <script type="text/javascript"> $(function(){ $('.dropdown-toggle').dropdown(); }); </script>

demo: http://jsfiddle.net/rLL75/

EDIT:

use the newer version of jquery.

+4
source 
 <header> <div class="navbar navbar-static header"> <div class="navbar-inner container"> <ul class="nav" role="navigation"> <li class="brand"><span style="color: #bde2e1;">Home</span></li> <li class="dropdown"> <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </li> <li class="hovering"><a href="#">Portfolio</a></li> <li class="hovering"><a href="#">Releases</a></li> <li class="hovering"><a href="#">Contact</a></li> </ul> <div id="logo"><a href="#"><img src="img/logo.png" /></a></div> </div> </div> </header> <script type="text/javascript"> $(function(){ $('.dropdown-toggle').dropdown(); }); </script>
0
source

More articles:


All Articles