点击空白处关闭对话框

最新推荐文章于 2024-01-08 21:10:24 发布

mj_leona

最新推荐文章于 2024-01-08 21:10:24 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/mj_leona/article/details/79644451

版权

<body>
<div><a href="#" id="btn">登录</a></div>
<div class="box" id="bbox"></div>
<div class="mask" id="maks"></div>
</body>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        height: 3000px;
    }
    .box{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.4);
        position: fixed;
        top: 0;
        left: 0;
        display: none;
    }
    .mask{
        width: 300px;
        height: 300px;
        background-color: white;
        position: fixed;
        top: 50%;
        left: 50%;
        display: none;
        margin: -150px 0 0 -150px;
    }
</style>

<script>
    function $(id) {
        return document.getElementById(id);
    }

    $("btn").onclick = function (event) {
        var event =event || window.event;
        $("bbox").style.display = "block";
        $("maks").style.display = "block";
        document.body.style.overflow = "hidden";  //取消滚动条，防止滚动
        if(event && event.stopPropagation)        //阻止点击事件btn冒泡，否则btn属于document,点击btn同时会触发下面的点击事件
        {
            event.stopPropagation();
        }
        else
        {
           event.cancelBubble = true;
        }
    };

    document.onclick = function (ev) {
        var ev = ev ||window.event;
        var targetId = ev.target? ev.target.id:ev.srcElement.id;      //获得当前事件的id,前者主流浏览器支持，后者ie678
        if(targetId!="maks")
        {
            $("bbox").style.display = "none";
            $("maks").style.display = "none";
        }
    }
</script>

mj_leona

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击空白处关闭对话框

&lt;body&gt;&lt;div&gt;&lt;a href="#" id="btn"&gt;登录&lt;/a&gt;&lt;/div&gt;&lt;div class="box" id="bbox"&gt;&lt;/div&gt;&lt;div class="mask" id=
复制链接

扫一扫