JQuery实现点击头像出现弹窗，除点击弹窗关闭，点击页面关闭，固定底部页面不滚动

html代码

<div class="fade"></div>
<div class="inviteAlert" >....</div>

JQuery代码

$(function(){
    //页面初始化时隐藏遮罩层以及弹窗
    $('.fade').hide();
    $(".inviteAlert").hide();
    //窗口外点击事件，点击遮罩层隐藏
    $(".fade").click(function () {
        $(".fade").hide();
        $(".inviteAlert").hide();
    })
    //点击头像
    $(".inviteImg img").click(function(e){
        //阻止事件冒泡,防止波及本按钮
        e.stopPropagation();
        //显示弹窗
        $('.fade').show();
        $(".inviteAlert").show();
        //固定底部页面防止滚动
        $('html').css({'overflow':'hidden','position':'fixed'})

    });
    //点击弹窗关闭
    $(".closeAlert").click(function(e){
        //阻止事件冒泡，防止波及本按钮
        e.stopPropagation();
        //隐藏弹窗
        $('.fade').hide();
        $(".inviteAlert").hide();
        //恢复底部页面滚动
        $('html').css({'overflow':'auto','position':'static'});
    });
})

css代码

 .fade {width:100%; height:100%;background:rgba(0, 0, 0, 0.5);position: fixed;left: 0;top: 0;z-index: 1000;}
    .inviteAlert {width: 7.5rem; height:  7.5rem;border-radius: 8px;position:fixed;left: 1.16rem;top:4.15rem;background:#fff;z-index:1000;overflow: scroll;}

效果图如下：

点击头像弹窗

效果图为测试版本，亲测有用