js实现弹框效果

js实现弹窗效果

利用display来控制弹窗的现实和隐藏

<!-- 弹出层 -->
<div id="popLayer"></div>   <!--黑色蒙版 -->
<div id="popBox">
     <div class="close">
            X
      </div>
     <div>
         <!-- 内容 -->
    </div>
</div>

//点击关闭按钮
var close = document.querySelector(".close")
close.onclick = function () {
    console.log("点击")
    var popBox = document.getElementById("popBox");
    var popLayer = document.getElementById("popLayer");
    popBox.style.display = "none";
    popLayer.style.display = "none";
}


//需要显示时调用
var popLayer = document.getElementById("popLayer");
popBox.style.display = "block";
popLayer.style.display = "block";

/* 弹出层 */
#popLayer {
    display: none;
    background-color: #000;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    opacity: 0.6;
}

/*弹出层*/
#popBox {
    display: none;
    background-color: #FFFFFF;
    z-index: 11;
    width: 220px;
    height: 300px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

/*关闭按钮*/
#popBox .close {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    border: 1px solid #fff;
    color: #fff;
    text-align: center;
    line-height: 20px;
    right: 8px;
    top: 8px;
    z-index: 50;
}

#popBox .close a {
    text-decoration: none;
    color: #2D2C3B;
}