为什么我的引导模式图像没有显示

Question

我正试图用bootstrap 3构建一个极其简单的图像库。

它只是几个缩略图，当你点击其中一个时，一个模式窗口会出现在顶部，并显示真实大小的图像。

这是我迄今为止的代码：

<div class="container">
    <div class="row">
        {% for foto in fotos %}
            <div class="col-md-2 ">
                <a href="#launch{{loop.index}}" data-toggle="modal">
                    <img class="photo-grid" src="{{foto.thumb_url}}" border="0">
                </a>
            </div>
        {% endfor %}
    </div>
</div>
{% for foto in fotos %}
    <section id="launch{{loop.index}}" class="modal hide fade">
        <div>
            <div class="modal-body">
                <img src="{{foto.big_url}}">
            </div>
        </div>
    </section>
{% endfor %}

因此，基本上它是一个Jinja2模板，接收带有图像链接的信息列表。

缩略图显示正确，但当我点击其中一个时，我希望看到一个模式窗口出现在顶部，并以更大的尺寸显示图像。但这并没有发生。

我已经检查了数据foto.thumb_url和foto.big_url是否正确。

这就是我导入引导程序的方式：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

关于我的代码中缺少什么，有什么想法吗？

Answer 1

您需要更改

<a href="#launch{{loop.index}}" data-toggle="modal">

至

<a href="#" data-target="#launch{{loop.index}}" data-toggle="modal">

Bootstrap需要具有模态ID的datatoggle属性来知道要打开哪个模态。看看这个JSFiddle，我只是稍微调整了一下你的东西http://jsfiddle.net/9A6uA/