如何用Bootstrap实现图片弹出放大
程序员文章站
2022-04-07 16:19:08
...
<td> <center> <img style="height: 100px;width: 100px;" onmouseover="this.style.cursor='pointer';this.style.cursor='hand'" onmouseout="this.style.cursor='default'" src="<?php echo $v['pic_detail'];?>" onclick="javascript:showimage('<?php echo $v['pic_detail'];?>');" /></center></td> <p id="ShowImage_Form" class="modal hide"> <p class="modal-header"> <button data-dismiss="modal" class="close" type="button"></button> </p> <p class="modal-body"> <p id="img_show"> </p> </p> </p>
实现JS:
//显示大图 function showimage(source) { $("#ShowImage_Form").find("#img_show").html("<image src='"+source+"' class='carousel-inner img-responsive img-rounded' />"); $("#ShowImage_Form").modal(); }
实现效果:
【相关视频推荐:Bootstrap教程】
以上就是如何用Bootstrap实现图片弹出放大的详细内容,更多请关注其它相关文章!
上一篇: CSS入门教程之margin属性
下一篇: 利用SVG和CSS3实现炫酷的边框动画