JS/JQ动画效果

<style>
    .mask {
        position: fixed;
        display: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0,0,0,.6);
    }
    
    .mask .login  {
        width: 500px;
        height: 350px;
        background: #fff;
        margin: 150px auto;
    }
</style>
<a href="#">登录</a>
<div class="mask" id="mask">
    <div class="login" id="login">
        
    </div>
</div>
<script>
    var a = document.getElementsByTagName("a")[0];
    var mask = document.getElementById("mask");
    a.onclick = function(event) {
        mask.style.display = "block";
        // 阻止冒泡
        event = event || window.event;
        if (event || event.stopPropagation()) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
    document.onclick = function(event) {
        event = event || window.event;
        // 兼容获取触动事件时被传递过来的对象
        var aaa = event.target?event.target:event.srcElement;
        if (aaa.id !== "login") {
            mask.style.display = "none";
        }
    }
</script>