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

4

2 回答 2

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>

正确缩进你的代码,从长远来看,它会为你节省大量时间。

于 2013-08-20T00:20:34.093 回答
1

您在</div>第一个结尾处缺少 a<div class="modal-footer">

于 2013-08-20T00:21:44.287 回答