[英]popup window not coming in bootstrap by using modal class
我使用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内容
当我们点击弹出模态角度 5 时，如何获得来自 ng-bootstrap 的类模态背景？
[英]how to get class modal-backdrop which is coming from ng-bootstrap when we click on popup modal angular 5?
Angular UI Bootstrap Modal在Eclipse中不起作用。 模式弹出窗口位于页面底部，而不是弹出窗口
[英]Angular UI Bootstrap Modal not working in eclipse. Modal Pop up coming at the bottom of the page not as popup
当Bootstrap模式弹出窗口关闭时，MVC滚动窗口消失
[英]MVC scroll windows disappear when Bootstrap modal popup window close
在ipad浏览器中打开bootstrap模式时，是否可以将模态弹出窗口的位置固定在中心？ 我正在使用Bootstrap v3.0.0
[英]Is it possible to fix the position of modal-popup window in center when bootstrap modal is open in ipad browsers? I am using Bootstrap v3.0.0
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.