孙肖宁

隐藏模态框
描述:当用户点击登录的时候,弹出一片区域,中间空白区域与其他区域不同,其他区域为半透明状态。点击透明状态的时候,弹...
扫描右侧二维码阅读全文
20
2018/04

隐藏模态框

描述:当用户点击登录的时候,弹出一片区域,中间空白区域与其他区域不同,其他区域为半透明状态。点击透明状态的时候,弹出区域关闭,点击中间区域,无效。
技术难点:取消冒泡
实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏模态框</title>
    <style>
        body,html {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        .mask {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            background: rgba(0, 0, 0, 0.6);
        }
        .login {
            width: 400px;
            height: 300px;
            cursor: pointer;
            background-color: #fff;
            margin: 200px auto;
        }
    </style>
</head>
<body>
    <div class="mask">
        <div class="login" id="login"></div>
    </div>
    <a href="#">注册</a>
    <a href="#">登陆</a>
</body>
</html>
<script>
    //模态框
    var mask = document.getElementsByClassName("mask")[0];
    //点击a链接
    var a = document.getElementsByTagName("a")[1];

    //a的点击事件,点击之后弹出模态框
    a.onclick = function (event) {

        event = event || window.event;

        mask.style.display = "block";
        //取消冒泡
        if(event || event.stopPropagation){
            event.stopPropagation();
        }else {
            event.cancelBubble = true;
        }
    }

    document.onclick = function (event) {
        event = event || window.event;

        //获取点击的区域
        var box = event.target?event.target:event.srcElement;
        if(box.id !== "login"){
            mask.style.display = "none";
        }
    }
</script>
Last modification:April 20th, 2018 at 11:01 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment