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

最近的一个项目,设计稿上有个地方是弹出层,但是没有看见关闭按钮或者关闭图片,这让我很疑惑,这要怎么关闭?用户体验不会变差么?但想了想无所谓了,大不了以后再改,加个按钮或者图片点击隐藏而已,于是我就按着设计稿上的做了,今天特地分享出来(默认样式因为是单独一个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';
        }
    })
}

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

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页