html – 用于图像的Twitter bootstrap-modal

发布时间：2020-12-14 18:27:49 所属栏目：资源来源：网络整理

导读：我有一个页面,其中包含注册用户的详细信息. 每个html表包含80-90个用户. 对于每个用户,都有一个$username变量. 我通常会在下面的代码中显示他们的照片. print "a href="small-avatar-$username.jpg" target="_blank"img src="big-avatar-$username.jpg

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!