html - 用于图像的Twitter bootstrap-modal

我有一个页面，其中包括注册用户的详细信息。
每个HTML表都包含80-90个用户。
对于每个用户，都有一个$username变量。
我通常把他们的照片放在一张表格里，就像下面的代码一样。

print "<a href=\"small-avatar-$username.jpg\" target=\"_blank\">
<img src=\"big-avatar-$username.jpg\">
</a>";

但用户可以在新的选项卡中打开图像。我想轻松展示大人物。
我的第一个选择是lightbox jquery。但是因为我在我的站点中使用了Twitter引导，所以我决定使用默认的引导和jquery特性。
我看到有“引导模式”。当用户单击链接时，我不打算显示比我的大图更多的内容。
我试过这个：

print "<a href=\"#$username" data-toggle=\"modal\" class=\"img-modal\" >
        <img src=\"small-avatar-$username.jpg\" ></a>";
print '</td>';

.

print "<div id=\"$username\" class=\"modal\">";
       <img src=\"big-avatar-$username.jpg\">
print "</div>";

.

<script type="text/javascript" id="js">
        $('#username').modal();
</script>

我想把
对于我的页面的每个用户来说，HTML文件都是巨大的。
但是我尝试了锚的类名，如下所示：$('#username').modal();
但这不起作用。
在这种情况下你会推荐什么？

最佳答案

我建议您在<a>标记中使用HTML5 Custom Data Attributes来标识用户名并保留您的img-modal类。

"<a href="#myModal" data-username='".$username."' class="img-modal">...

在click on.img modal上触发对modal的调用（您不需要数据toggle=“modal”）。

$('.img-modal').click(function(event) {

您可以使用

var username = $(this).attr('data-username')

因为您有用户名，所以可以用类似的东西替换唯一模式中src标记的<img>属性。

$("#img-in-modal").attr("src","big-avatar-" + username + ".jpg")

打开你的模式

$('#myModal').modal('show')

最后，确保包含bootstrap-modal.js或boostrap.js。