Twitter Bootstrap模态框用于图片

Question

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

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

但用户可以在新标签页中打开图片。我希望能够轻松显示大头像。 我的第一选择是lightbox-jquery。但由于我网站使用了twitter-bootstrap，所以我决定使用默认的bootstrap和jquery功能。

我发现有"bootstrap-modals"。当用户点击链接时，我不打算显示更多的东西，只想展示一张大图片。

我尝试了这个方法：

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>

我想，为每个用户在我的页面上放置$('#username').modal();
会使HTML文件变得很大。

但是后来我尝试了这样的锚点类名：$('.img-modal').modal();
但是它没有起作用。

在这种情况下，您会推荐什么？

- trante

Answer 1

我建议你在HTML5自定义数据属性中使用一个<a>标签来识别用户名并保留你的img-modal类。

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

当点击 .img-modal 时触发对模态框的调用（无需使用 data-toggle="modal"）。

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

你可以通过以下方式获取用户名的值

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

由于您已经有了用户名，您可以将唯一模态框中的<img>标签的src属性替换为以下内容：

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

打开您的模态框

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

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

- baptme

---

访问data-*属性的另一种方式是$(this).data('username')。 - rafasoares