黑色透明背景弹出层

<section id="tixian" class="pop_500" style="display: none">
    <section class="modal2">
        <em class="close" onClick="hideid('tixian')"><img src="assets/images/j_img6.jpg" alt="" width="100%"></em>
      <p><img src="assets/images/j_img5.jpg" alt="" style=" 0.4rem"></p>
        <p>是否确认提现到默认银行卡?</p>
        <p>
            <span class="j_blue_btn" onClick="hideid('tixian')">确认提现</span>
        </p>
    </section>

//弹出层
function showid(idname) {
    var newbox = document.getElementById(idname);
    newbox.style.zIndex = "9999999";
    newbox.style.display = "block"
    newbox.style.position = "fixed";
    newbox.style.top = newbox.style.left = "50%";
    newbox.style.marginTop = -newbox.offsetHeight / 2 + "px";
    newbox.style.marginLeft = -newbox.offsetWidth / 2 + "px";
    var layer = document.createElement("div");
    layer.id = "layer";
    layer.style.width = layer.style.height = "100%";
    layer.style.position = "fixed";
    layer.style.top = layer.style.left = layer.style.bottom = 0;
    layer.style.backgroundColor = "#000";
    layer.style.zIndex = "9999998";
    layer.style.opacity = "0.5";

    layer.style.filter = "Alpha(Opacity=50)";
    document.body.appendChild(layer);
    window.onresize = function() {
        newbox.style.marginTop = -newbox.offsetHeight / 2 + "px";
        newbox.style.marginLeft = -newbox.offsetWidth / 2 + "px";
    }
    layer.onclick = function() {
        newbox.style.display = "none";
        document.body.removeChild(layer);
        layer.style.width = layer.style.height = "100%";
    };
    layer.ontouchmove = function(e) {
        e.preventDefault && e.preventDefault();
        e.returnValue = false;
        e.stopPropagation && e.stopPropagation();
        return false;
    }
}

function hideid(idname) {
    var newbox = document.getElementById(idname);
    newbox.style.display = "none";
    var layer = document.getElementById("layer");
    document.body.removeChild(layer);
}

//弹出层结束 

原文地址:https://www.cnblogs.com/zhouyx/p/5175815.html