Bootstrap 外部 link 模态继承

Question

所以我有这段代码，当我单击 View Receipt link 时，收据图像的外部 link 将以模式弹出。我正在使用 twig 和 slim 框架。

这是我的 html 文件和树枝：

{% for r in results %}
<a data-toggle="modal" href="/user/receipt/{{r.accountID}}" data-target="#myModal">View Receipt</a>
{% endfor %}

{% block script %}
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        </div> <!-- /.modal-content -->
    </div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
{% endblock %}

route.php代码：

$app->get('/user/receipt/:id', function($id) use($app) {
    $db = new db();
    $bind = array(
    ":aid" => $id
    );
    $result = $db->select("accounts", "accountID = :aid", $bind);
    $app->render('screenshot.html', array('result' => $result));
});

screenshot.html代码：

{% for r in result %}
    <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    </div>
    <div class="modal-body">
     <img src="/assets/img/receipts/{{r.receipt}}" class="img-responsive">
    </div>
{% endfor %}

现在一切正常。图像显示在模态中。问题是......当我第一次点击 View Receipt link 页面时，所有其他 links 将包含相同的图像而不是基于的图像accountID。所有 link 都继承被点击的第一个 link。我做错了什么？

Answer 1

我不确定如何做您当前正在做的事情 - 动态生成模态内容 - 但有一个替代方案。

您可以改为将模态框包装在 for 循环中，并将其 ID 与收据 ID 相关联。因此，每个模态仅包含其各自的收据图像。

{% for r in results %}
<a data-toggle="modal" href="/user/receipt/{{r.accountID}}" data-target="#myModal{{r.id}}">View Receipt</a>
{% endfor %}

那么你的模态代码看起来像这样...

{% for r in results %}
<div class="modal fade" id="myModal{{r.id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
    </div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->

Bootstrap 外部 link 模态继承

Bootstrap external link modal inheritance

php

jquery

slim

twitter-bootstrap

bootstrap-modal