<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实现图片弹出放大的详细内容。更多信息请关注PHP中文网其他相关文章!