I attempted to create a responsive image gallery using the bootstrap framework. Each image has its own modal class, but when I click on an image, no popup window appears, only a dark screen is displayed. I have checked this in the Bootstrap documentation and tried different browsers, but I am still encountering the same issue. Here is my code:
<html>
<head>
<title>@ John Doe</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="span6">
<h2>Sample Club Members</h2>
</div>
<div class="container">
<div class="row">
<div class="span6">
<ul class="thumbnail">
<li class="span2"><a href="#popup" class="thumbnail" data-toggle="modal"><img src="img/sample1.jpg" alt=""></a></li>
<li class="span2"><a href="#popup1" class="thumbnail" data-toggle="modal"><img src="img/sample2.jpg" alt=""></a></li>
<li class="span2"><a href="#popup2" class="thumbnail" data-toggle="modal"><img src="img/sample3.jpg" alt=""></a></li>
<li class="span2"><a href="#popup3" class="thumbnail" data-toggle="modal"><img src="img/sample4.jpg" alt=""></a></li>
<li class="span2"><a href="#popup4" class="thumbnail" data-toggle="modal"><img src="img/sample5.jpg" alt=""></a></li>
<li class="span2"><a href="#popup5" class="thumbnail" data-toggle="modal"><img src="img/sample6.jpg" alt=""></a></li>
<li class="span2"><a href="#popup6" class="thumbnail" data-toggle="modal"><img src="img/sample7.jpg" alt=""></a></li>
<li class="span2"><a href="#popup7" class="thumbnail" data-toggle="modal"><img src="img/sample8.jpg" alt=""></a></li>
<li class="span2"><a href="#popup8" class="thumbnail" data-toggle="modal"><img src="img/sample9.jpg" alt=""></a></li>
</ul>
</div>
</div>
<!-- close row -->
<div id="popup" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>John Doe</h3>
</div>
<div class="modal-body">
<p><img src="img/sample1.jpg" alt="" class="pull-right"> Example description for the first member.</p>
</div>
<div class="modal footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>