The usage of the front-end mask layer (click on the picture to trigger)

var originalLeft=originalTop='';
$('.sec_item img').click(function(){
    
    
    var globalBackground = document.getElementById('globalBackground'); //遮罩层Id
    if(globalBackground.style.opacity!=0.5){
    
    
    	lobalBackground.style.width=window.screen.width+'px';
        globalBackground.style.opacity='0.5';
        originalLeft = $(this).position().left;
        originalTop = $(this).position().top;
        $(this).css('z-index','1000');
        $(this).css('position','absolute');
        
        //可以通过改变width实现图片放大
        //$(this).css('width', 图片新宽度);
        //$(this).css('left', window.screen.width/2 - 图片宽度/2);
        //$(this).css('top', window.screen.height/2 - 图片高度/2);
    }else{
    
    
        globalBackground.style.width='0px';
        globalBackground.style.opacity='1';
        $(this).removeAttr('style');
        
        //可以通过改变width实现图片还原
        //$(this).css('width', 图片旧宽度);
        //$(this).css('left', originalLeft);
        //$(this).css('top', originalTop);
    }
})