jQuery实现点击查看大图并以弹框的形式居中

时间：2021-05-26

jQuery实现点击查看大图并以弹框的形式居中，实现的关键代码如下所示：

*{margin:0;padding:0;}.tab_bg{display:none;width:100%;height:100%;background:#282829;z-index:99;position:absolute;}.tab_img{width:100px;height:100px;margin:20px;}.tab_img img{width:100%;height:100%;}.bigImg{display:none;width:300px;height:300px;z-index:999;position:absolute;left:50%;margin-top:-150px;margin-left:-150px;}.bigImg img{width:100%;height:100%;}.close{display:none;width:20px;height:20px;border-radius:100%;border:1px solid #ccc;text-align:center;cursor:pointer;position:absolute;right:10px;top:10px;z-index:999;color:#fff}li{height:300px;}<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head><body><div class="tab_bg"><div class="close">x</div></div><ul><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li></ul><table><tr><td>1</td><td><div class="tab_img tab_img1"><img src="2.jpg" alt=""/></div></td></tr><tr><td>2</td><td><div class="tab_img tab_img2"><img src="3.jpg" alt=""/></div></td></tr><tr><td>3</td><td> <div class="tab_img tab_img3"><img src="1.jpg" alt=""/></div></td></tr></table></body></html>var $height=$(window).height();$(".tab_bg").height($height);function imgEnlarge(small){$(small).on("click",function(){var $big=document.createElement("div");$($big).attr("class","bigImg");$($big).appendTo($("body"));var $img=document.createElement("img");$($img).attr("src",$(this).find("img").attr("src"));$($img).appendTo($big);$(this).css("display","none");$(".tab_bg").css("display","block");$(".close").css("display","block");$($big).fadeIn();$(window).bind("scroll",function(){return false});var top1=$(window).scrollTop();$(window).scrollTop(top1);$(".tab_bg").css("top",top1);$("body").css("overflow","hidden");$(".bigImg").css("top",top1+$height/2);});$(".close").on("click",function(){$(this).css("display","none");$(small).css("display","block");$(".tab_bg").css("display","none");$(".bigImg").css("display","none");$("body").css("overflow","auto");})}$(".tab_img").each(function(){imgEnlarge($(this));})

以上所述是小编给大家介绍的jQuery实现点击查看大图并以弹框的形式居中，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章