只有一个模式弹出-引导
Only one Modal Pops Up - 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 class="modal-footer">
的末尾缺少一个</div>
在所有模式页脚中都缺少一个close </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>
正确地缩进代码,从长远来看会节省大量时间。
相关文章:
- 是否有一个JS/jQuery函数可以获取某个类的每个元素的ID
- 如何在只能有一个asp.net表单的主页上从asp.net页面中的javascript中获取值
- 有可能在来自链接的警报中有一个值吗
- 是否<asp:文本框>有一个onFocusLost事件
- 让谷歌数据图表有一个24小时x轴
- PayPal按钮是否有一个简单的选项,其中金额基于一些用户输入
- 我确实有一个表单,如果用户输入了输入,它应该检查否定或空的输入框,并抛出一条警告消息
- 在这个使用hasOwnProperty的对象扩展程序中有一个错误,I'我不确定那个bug是什么,也不确定这个扩展
- 当知道同一hiearch中至少有一个元素时,遍历到元素.结构使用jquery
- PNG图像被覆盖,但每个图像都有一个链接可以更改,每次一个-Javascript/jQuery/CSS
- JQuery是否有一个“;移动“;作用或者有没有一种更紧凑的方法来做到这一点
- 我怎样才能有一个带有Twitter引导程序的下拉子菜单
- 启用段落的背景色<p>当有一个带有CSS的引导按钮时
- 我有一个引导模式的问题-一半的页面加载
- 引导词缀属性在标题下面有一个固定的导航
- 我有一个表在引导-我怎么能添加一个列,其中包含删除按钮选定行
- 我如何在引导中验证至少有一个复选框被标记并将此信息传递给php ?
- 引导-当有一个图像加载错误时回退
- 引导崩溃有一个跳跃的过渡
- 如何使引导导航栏背景有一个透明的淡出到网页