点击遮罩层内容以外的区域关闭遮罩层

最近的一个项目，设计稿上有个地方是弹出层，但是没有看见关闭按钮或者关闭图片，这让我很疑惑，这要怎么关闭？用户体验不会变差么？但想了想无所谓了，大不了以后再改，加个按钮或者图片点击隐藏而已，于是我就按着设计稿上的做了，今天特地分享出来（默认样式因为是单独一个css文件，太长，就用 * 强制清除默认样式了，但是推荐不这样用，至于为什么可以百度）。
接下来贴代码，首先是css的：

* {
    
    
        margin: 0;
        padding: 0;
    }
    html,body {
    
    
        width: 100%;
        height: 100%;
    }
    .containenr {
    
    
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        background: url(./images/xiaolv.jpg)no-repeat;
        background-size: cover;
        position: relative;
    }
    .dialog {
    
    
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .7);
    }
    .content {
    
    
        width: 600px;
        height: 600px;
        background-color: yellow;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -300px;
        margin-left: -300px;
    }
    .btn {
    
    
        width: 200px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        color: red;
        font-weight: 600;
        background-color: aquamarine;
        margin: 0 auto;
        cursor: pointer;
    }
    .hide {
    
    
        display: none;
    }

然后是页面的布局，比较简单：

<div class="containenr">
    <div id="btn" class="btn">点我显示遮罩层</div>
        <div id="dialog" class="dialog hide">
        <div id="content" class="content"></div>
    </div>
</div>

最后是js，也比较简单：

window.onload = function () {
    
    
    var dialog = document.getElementById('dialog');
    var content = document.getElementById('content');
    var btn = document.getElementById('btn');

    //点击显示遮罩层
    btn.onclick = function () {
    
    
        dialog.classList.remove('hide');
        // dialog.style.display = 'block';
    }

    //点击除黄色区域隐藏遮罩层
    dialog.addEventListener('click',function(e){
    
    
        //阻止冒泡
        window.event ? window.event.cancelBubble = true : e.stopPropagation();
        var e = window.e || e;
        var el = e.target || e.srcElement;
        //获取当前点击区域的className
        var el_name = el.className;
        console.log(el_name);
        //如果点击区域等于内容区域就return，否则就隐藏
        if(el_name == 'content') {
    
    
            return;
        }else {
    
    
           dialog.classList.add('hide');
           // dialog.style.display = 'none';
        }
    })
}

到此为止这次分享就结束了，本人也是自学的前端现在在实习，技术有限可能会有不足的地方希望大神能指点，有问题可以回复讨论，最后希望能看到本篇文章的前端小伙伴早日成为巨佬，共勉！