2013-08-20 42 views
0

我有一个引导问题 - 只有一个模式弹出!我查看了代码,找不到问题所在。第一种模式与其他模式一样,所以我不知道发生了什么问题。这里有一个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

回答

1

你在你的第一个<div class="modal-footer">

+0

我当然是。即使花了一个小时来查看代码,我也无法理解。也许是时候离开电脑了。非常感谢! – user2693351

1

你错过了一个关闭</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> 

正确地缩进你的代码,它会为你节省大量的时间。

+0

我的代码末尾缺少</div>缩进在记事本+ +,但由于某种原因缩进得到所有奇怪的,当我在这里贴上它。谢谢btw。 – user2693351