css弹出层后不屏蔽背景

在网页开发中，弹出层是一个非常常见的功能。对于初学者来说，通过CSS实现弹出层是一个不错的练手项目。然而，在实现弹出层时，有些人会遇到一个问题：弹出层出现后背景会被屏蔽，用户无法进行操作。这篇文章将介绍如何通过CSS实现弹出层后不屏蔽背景。

html,body{
    height:100%;
}
body{
    background-image: url(XXX.png);
    background-size:cover;
}
.popup{
    position:fixed;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    z-index:999;
    background-color:#fff;
    width:280px;
    height:120px;
    border-radius:10px;
    Box-shadow:0 0 10px rgba(0,0.3);
    text-align:center;
    padding-top:20px;
}
.popup button{
    background-color:#008CBA;
    color:#fff;
    border:none;
    padding:10px 20px;
    border-radius:5px;
}
.overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0.5);
    z-index:998;
    display:none;
}
.popup-show{
    display:block;
}

在上述代码中，我们通过设置`.overlay`的样式来实现不屏蔽背景的功能。`.overlay`是一个绝对定位的全屏div，将其默认设为`display:none`，当点击弹出按钮时将其设为`display:block`。这样，在弹出层出现时，`.overlay`将覆盖在背景上，不影响用户操作。具体实现可以看下面的JS代码：

var overlay=document.querySelector(".overlay");
var popup=document.querySelector(".popup");
var btn=document.querySelector(".btn");

btn.addEventListener("click",function(){
    popup.classList.add("popup-show");
    overlay.style.display="block";
});

overlay.addEventListener("click",function(){
    popup.classList.remove("popup-show");
    overlay.style.display="none";
});

上述JS代码中，我们通过添加和删除`.popup-show`类来控制弹出层的出现和消失。同时在点击`.overlay`时，将弹出层设为隐藏，也将`.overlay`设为不可见。

通过上述CSS和JS代码，我们成功地实现了弹出层后不屏蔽背景的效果。在实现网页的过程中，我们需要灵活运用CSS和JS的各种功能，才能实现更加完善的弹出层效果。