图片放大弹出框

来源：互联网发布：php开源团购系统编辑：程序博客网时间：2024/06/05 20:36

图片放大弹出框：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.clickbigimg {display: inline-block;float: right;width:20%;}.clickbigimg img {vertical-align: middle;}.dialog {position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%;display: none;background: rgba(0,0,0,.5);filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f000000, endcolorstr=#7f000000);}.dialog .detail {width:860px;height:500px;position: absolute;top:0;right:0;bottom:0;left:0;margin:auto;z-index: 30;}.dialog .pic {width:100%;height:100%;border-radius:10px;}.dialog .closeIcon {position: absolute;width:51px;height:51px;top:-50px;right:-34px;    }</style></head><body><div class="dialog"><div class="detail"><img src="" class="pic"> <!-- 关闭按钮 --><img src="/statics/images/szjp1018/img/close.png" class="closeIcon">  <!-- 弹出图片 --></div> </div><div class="clickbigimg"><img src='./001.jpg' /></div></body><script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script><script> // 图片绑定点击事件$(document).on('click','.clickbigimg img',function(){var imgsrc = $(this).attr('src');$('.dialog').show();$('.dialog .pic').attr('src',imgsrc);});$(document).on('click','.dialog .closeIcon',function(){$('.dialog').hide();});</script></html>

阅读全文

0 0