Bootstrap外部链接模式继承

Question

所以我有这个代码，当我点击View Receipt链接时，收据图像的外部链接将以模式弹出。我正在使用树枝和苗条的框架。

这是细枝我的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链接时，所有其他链接将包含相同的图像，而不是基于accountID的图像。所有链接都会继承正在单击的第一个链接。我究竟做错了什么？

Answer 1

我不知道如何去做你现在正在做的 - 动态生成模态内容 - 但有一个选择。

您可以改为使用与收据ID相关的ID将它们包装在for循环中。因此，每个模式只包含它们各自的收据图像。

{% 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 -->