[英]Only one Modal Pops Up - Bootstrap
我有一个bootstrap问题 - 只有一个模态弹出! 我已经查看了代码,但无法找到问题所在。 第一个模态与其他模态完全相同,所以我不知道出了什么问题。 这是一个CodePen(就像一个jsFiddle): CodePen
这是代码:参考
<link href="favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
缩略图库
<div class="container">
<div class="row">
<div class="span12">
<ul class="thumbnails">
<li class="span3"><a href="#somo" class="thumbnail" data-toggle="modal"><img src="http://placehold.it/150x150" class="img-polaroid" alt=""></a></li>
<li class="span3"><a href="#groth" class="thumbnail" data-toggle="modal"><img src="http://placehold.it/150x150" class="img-polaroid" alt=""></a></li>
<li class="span3"><a href="#gibson" class="thumbnail" data-toggle="modal"><img src="http://placehold.it/150x150" class="img-polaroid" alt=""></a></li>
<li class="span3"><a href="#baskin" class="thumbnail" data-toggle="modal"><img src="http://placehold.it/150x150" class="img-polaroid" alt=""></a></li>
</ul>
</div>
<div class="span12">
<ul class="thumbnails">
<li class="span3"><a href="#obrien" class="thumbnail" data-toggle="modal"><img src="http://placehold.it/150x150" class="img-polaroid" alt=""></a></li>
<li class="span3"><a href="#coh" class="thumbnail" data-toggle="modal"><img src="http://placehold.it/150x150" class="img-polaroid" alt=""></a></li>
<li class="span3"><a href="#chada" class="thumbnail" data-toggle="modal"><img src="http://placehold.it/150x150" class="img-polaroid" alt=""></a></li>
<li class="span3"><a href="#panikkar" class="thumbnail" data-toggle="modal"><img src="http://placehold.it/150x150" class="img-polaroid" alt=""></a></li>
</ul>
</div>
</div>
</div>
情态动词
<div id="somo" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Meagan Somo</h3>
</div>
<div class="modal-body">
<p><img src="http://placehold.it/230x270" alt="" class="pull-left">Text here.</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
<div id="groth" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Desi Groth</h3>
</div>
<div class="modal-body">
<p><img src="http://placehold.it/230x270" alt="" class="pull-left">Text here.</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div><div id="gibson" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Jessie Gibson</h3>
</div>
<div class="modal-body">
<p><img src="http://placehold.it/230x270" alt="" class="pull-left">Text here.</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div><div id="baskin" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Connor Baskin</h3>
</div>
<div class="modal-body">
<p><img src="http://placehold.it/230x270" alt="" class="pull-left">Text here.</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div><div id="obrien" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Nik O'Brien</h3>
</div>
<div class="modal-body">
<p><img src="http://placehold.it/230x270" alt="" class="pull-left">Text here.</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div><div id="coh" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Elizabeth Coh</h3>
</div>
<div class="modal-body">
<p><img src="http://placehold.it/230x270" alt="" class="pull-left">Text here.</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div><div id="chada" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Rachel Chada</h3>
</div>
<div class="modal-body">
<p><img src="http://placehold.it/230x270" alt="" class="pull-left">Text here.</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div><div id="panikkar" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Manoj Panikkar</h3>
</div>
<div class="modal-body">
<p><img src="http://placehold.it/230x270" alt="" class="pull-left">Text here.</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
有关完整代码,请查看CodePen 。
你在所有的模态页脚中都缺少一个紧密的</div>
标签。 应该:
<div id="somo" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Meagan Somo</h3>
</div>
<div class="modal-body">
<p><img src="http://placehold.it/230x270" alt="" class="pull-left">Text here.</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
正确缩进代码,从长远来看,它可以为您节省大量时间。
你在第一个<div class="modal-footer">
的末尾错过了一个</div>
<div class="modal-footer">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.