JS / JQ animation

1, pop-up box

<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;
         // compatible with being passed over when acquiring touch event object 
        var aaa = event.target ? event.target:event.srcElement;
         IF (aaa.id ! ==  " Login " ) { 
            mask.style.display =  " none " ; 
        } 
    } 
</ Script >

 Bubbling event:

cancalBubblt () and stopPropagation (): in common is that they are used to prevent the browser's default event bubbling behavior. The difference is that stopPropagation () belongs to the W3C standards for Firefox and other browsers, but does not support IE; cancelBubble does not comply with W3C standards, only supports IE, so the combined use very often.
Syntax: e.stopPropagation (), the event parameter e delivered on behalf of, on behalf of the state of the event.

jQuery Bubble and the ways to prevent the default behavior can also be written as:
event.preventDefault () -> return false; event.stopPropagation () -> return false;