一、HTML代码如下：

<img class="comment_pics" width="50px" height="50px" src="img/01.jpg"/>

<div class="bg">
    <img class="bgImg" style="max-width: 100%; max-height: 100%; position: fixed;" src="">
</div>

二、CSS代码如下：

.fillbg { background-color: rgba(0, 0, 0, 0.6); bottom: 0; height: 100%; left: 0; opacity: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 1100; display:none; }
.fillbg-active { opacity: 1; display:block; }

 

三、jQuery代码如下：

<script>
    var newImg;
    var clientH=$(window).height();
    var clientW=$(window).width();
    var w = \'250\';
    var h = \'250\';
    $(document).ready(function(){
        $(".comment_pics").bind("click", function(){
            newImg = $(this)[0].src;
            $("body").append(\'<div class="fillbg"></div>\');
            $(".fillbg").addClass("fillbg-active");
            $(\'.bgImg\').css({\'width\': w+"px",\'height\': h+"px",\'top\':(clientH-h)/2+"px",\'left\':(clientW-w)/2+"px",\'z-index\':1101});
            $(\'.bgImg\').attr("src",newImg);
        });

        $(".bgImg").bind("click", function(){
            $(".fill-input").removeClass("fill-input-active");
            setTimeout(function(){
                $(".fillbg-active").removeClass("fillbg-active");
                $(".fillbg").remove();
            },300);
            $(\'.bgImg\').css({\'width\': \'0px\',\'height\': \'0px\'});
            $(\'.bgImg\').attr("src",\'\');
        });
    });
</script>