我有一个页面,其中包含注册用户的详细信息.
每个html表包含80-90个用户.
对于每个用户,都有一个$username变量.
我通常会在下面的代码中显示他们的照片.
每个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();
但这没效果.
在这种情况下你会推荐什么？
解决方法
我建议你在你的< 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')
由于您拥有用户名,因此可以替换< img>的src属性.在你的独特模态中标记类似的东西.
$("#img-in-modal").attr("src","big-avatar-" + username + ".jpg")
并打开你的模态
$('#myModal').modal('show')
最后,确保包含bootstrap-modal.js或boostrap.js.
