我使用 bootstrap 框架制作了一个响应式图片库，我为每个图片定义了单独的模式类，但是在点击图片后没有弹出窗口出现，只显示了一个黑屏，我在 bootsrap 文档中检查过，并且也在其他浏览器中，但同样的问题来了，这是我的代码:
<html>
<head>
<title>@ SAURABH SINGH</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>Curiosity Club, JEC Jabalpur, TEAM 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/atulsir.jpg" alt=""></a></li>
<li class="span2"><a href="#popup1" class="thumbnail" data-toggle="modal"><img src="img/ambarsir.jpg" alt=""></a></li>
<li class="span2"><a href="#popup" class="thumbnail" data-toggle="modal"><img src="img/prabhakarsir1.jpg" alt=""></a></li>
<li class="span2"><a href="#popup" class="thumbnail" data-toggle="modal"><img src="img/nishantsir.jpg" alt=""></a></li>
<li class="span2"><a href="#popup" class="thumbnail" data-toggle="modal"><img src="img/saranshsir.jpg" alt=""></a></li>
<li class="span2"><a href="#popup" class="thumbnail" data-toggle="modal"><img src="img/mayanksir.jpg" alt=""></a></li>
<li class="span2"><a href="#popup" class="thumbnail" data-toggle="modal"><img src="img/abhisheksir.jpg" alt=""></a></li>
<li class="span2"><a href="#popup" class="thumbnail" data-toggle="modal"><img src="img/gaanda.jpg" alt=""></a></li>
<li class="span2"><a href="#popup" class="thumbnail" data-toggle="modal"><img src="img/saurabh.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>Atul Sinha</h3>
</div>
<div class="modal-body">
<p><img src="img/atulsir.jpg" alt="" class="pull-right"> 8th semester Information Technology student in Jabalpur engineering college</p>
</div>
<div class="modal footer">
<button class="btn" data-dismiss="modal">close</button>
</div>
</div>
<div id="popup1" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Ambar Khan</h3>
</div>
<div class="modal-body">
<p><img src="img/ambarsir.jpg" alt="" class="pull-right">8th semester Information Technology student in Jabalpur engineering college</p>
</div>
<div class="modal footer">
<button class="btn" data-dismiss="modal">close</button>
</div>
</div>
<!--modal window-->
<div id="popup2" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Prabhakar Mishra</h3>
</div>
<div class="modal-body">
<p><img src="img/prabhakarsir.jpg" alt="" class="pull-right">8th semester Electronics and communication student in Jabalpur engineering college.</p>
</div>
<div class="modal footer">
<button class="btn" data-dismiss="modal">close</button>
</div>
</div>
<!--modal window-->
<div id="popup3" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Nishant Gaurav</h3>
</div>
<div class="modal-body">
<p><img src="nishantsir.jpg" alt="" class="pull-right"> 6th semester Information Technology student in Jabalpur engineering college</p>
</div>
<div class="modal footer">
<button class="btn" data-dismiss="modal">close</button>
</div>
</div>
<!--modal window-->
<div id="popup4" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Saransh Jain</h3>
</div>
<div class="modal-body">
<p><img src="img/saranshsir.jpg" alt="" class="pull-right">6th semester Information Technology student in Jabalpur engineering college</p>
</div>
<div class="modal footer">
<button class="btn" data-dismiss="modal">close</button>
</div>
</div>
<!--modal window-->
<div id="popup5" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Mayank Kumar</h3>
</div>
<div class="modal-body">
<p><img src="img/mayanksir.jpg" alt="" class="pull-right">6th semester Computer Science student in Jabalpur engineering college</p>
</div>
<div class="modal footer">
<button class="btn" data-dismiss="modal">close</button>
</div>
</div>
<!--modal window-->
<div id="popup6" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Abhishek Maheshwari</h3>
</div>
<div class="modal-body">
<p><img src="img/abhisheksir.jpg" alt="" class="pull-right">6th semester Electronics and Communication student in Jabalpur engineering college.</p>
</div>
<div class="modal footer">
<button class="btn" data-dismiss="modal">close</button>
</div>
</div>
<!--modal window-->
<div id="popup7" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Vipul Sharma</h3>
</div>
<div class="modal-body">
<p><img src="img/gaanda.jpg" alt="" class="pull-right">4th semester Information Technology student in Jabalpur engineering college</p>
</div>
<div class="modal footer">
<button class="btn" data-dismiss="modal">close</button>
</div>
</div>
<!--modal window-->
<div id="popup8" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Saurabh Singh</h3>
</div>
<p><img src="img/saurabh.jpg" alt="" class="pull-right">4th semester Information Technology student in Jabalpur engineering college</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>
最佳答案
最好为所有画廊图片使用一个模式。在您单击模态外部或触发转义键之前，您的模态不会被正确隐藏。我还建议您为您的画廊使用单一模式。
根据您的要求切换您的modal-body内容
关于javascript - 弹出窗口不会通过使用模态类进入 Bootstrap ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21657166/