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是否正确。

这就是我导入Bootstrap的方式：

<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的data-toggle属性来知道要打开哪个模态。看看这个JSFiddle，我稍微调整了你的东西http://jsfiddle.net/9A6uA/

为什么我的Bootstrap模态图像没有显示？

1 个答案: