css3点击外围

CSS3 点击外围是一个非常有用的功能，它可以让我们实现点击网页外侧，关闭某些弹出框或者下拉菜单等功能。本文将介绍如何使用 CSS3 实现点击外围的功能。

使用伪元素：

.overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
}
.dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 300px;
    background-color: #fff;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
    z-index: 10000;
}
.dialog:before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.dialog:target:before {
    opacity: .5;
}

使用 JavaScript：

document.addEventListener('click', function(e) {
    var dialog = document.querySelector('.dialog');
    var overlay = document.querySelector('.overlay');
if (e.target == overlay) {
    dialog.style.display = 'none';
}
}
    );
    

通过以上两种方式，我们就可以实现点击外围的功能。当然，选择使用哪种方式还是要根据实际情况来决定，个人建议如果只有点击外围的功能，使用 CSS3，如果有其他的交互功能需要处理，使用 JavaScript 更好。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！