用于图像的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

我建议您在标签中使用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')

由于您拥有用户名,因此可以使用类似的方式替换您的唯一模式中标记的src属性<img>.

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

并打开你的模态

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

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