用于图像的Twitter bootstrap-modal

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();
但这没效果。

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

Answer 1

我建议您使用<a>代码中的HTML5 Custom Data Attributes来识别用户名并保留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')

由于您拥有用户名，因此您可以使用类似的内容替换独特模式中src标记的<img>属性。

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

打开你的模态

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

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