7

我有一个页面，其中包含注册用户的详细信息。每个 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 功能。

我看到有“引导模式”。当用户点击链接时，我不打算展示比我大图更多的东西。

我试过这个：

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();
但这不起作用。

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

4

1 回答 1

17

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

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

点击 .img-modal 触发对 modal 的调用（您不需要 data-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。

于 2012-07-09T16:15:23.507 回答