JS弹窗图片遮罩层 点击取消

function img() {
        $(".meetingpic_page li img").on("click", function () {
            //var _w = parseInt($(window).width());//获取浏览器的宽度
                var img = $(this);
                var realWidth;//真实的宽度
                var realHeight;//真实的高度
                //这里做下说明，$("<img/>")这里是创建一个临时的img标签，类似js创建一个new Image()对象！
                $("<img/>").attr("src", $(img).attr("src")).load(function () {
                    /*
                    如果要获取图片的真实的宽度和高度有三点必须注意
                    1、需要创建一个image对象：如这里的$("<img/>")
                    2、指定图片的src路径
                    3、一定要在图片加载完成后执行如.load()函数里执行
                    */
                    realWidth = this.width;
                    console.log(realWidth)
                    realHeight = this.height;
                    console.log(realHeight)
                    //如果真实的宽度大于浏览器的宽度就按照100%显示
                    $('#shade').show();
                    $('.laye_img').show();
                    $('.laye_img').attr("src", $(this).attr("src"));
                    $('.laye_img').css("top", "50%").css("left", "50%");
                    if (realWidth >= 1920) {
                        $('.laye_img').css("width", realWidth * 0.4 + "px").css("height", realHeight*0.4+ "px");
                        $('.laye_img').css("margin-left", (-realWidth * 0.4) / 2 + "px").css("margin-top", (-realHeight * 0.4) / 2 + "px");
                    } else if (realWidth < 1920 && realWidth >= 1000) {
                        $('.laye_img').css("width", realWidth * 0.6 + "px").css("height", realHeight * 0.6 + "px");
                        $('.laye_img').css("margin-left", (-realWidth * 0.6) / 2 + "px").css("margin-top", (-realHeight * 0.6) / 2 + "px");
                    }
                    else {//如果小于浏览器的宽度按照原尺寸显示
                        $('.laye_img').css("max-width", realWidth + 'px').css("max-height", realHeight + 'px');
                        $('.laye_img').css("margin-left", (-realWidth/ 2) + "px").css("margin-top", (-realHeight/ 2) + "px");
                    }
                });
            })
            $("#shade").click(function () {
                if ($("#show").css("display") === 'none') {
                    $('#shade').hide();
                    $('.laye_img').hide();
                    $('.laye_img').attr("src", "");
                    $('.laye_img').css("max-width", "").css("max-height", "");
                    $('.laye_img').css("width", "").css("height", "");
                    $('.laye_img').css("margin-left",  "").css("margin-top",  "");
                }
               
            })
    }