zoukankan      html  css  js  c++  java
  • js弹出遮层

    <script>
    var docEle = function () {
    return document.getElementById(arguments[0]) || false;
    }
    function openNewDiv(_id) {
    var m = "mask";
    if (docEle(_id)) document.removeChild(docEle(_id));
    if (docEle(m)) document.removeChild(docEle(m));
    // www.codefans.net 新激活图层
    var newDiv = document.createElement("div");
    newDiv.id = _id;
    newDiv.style.position = "absolute";
    newDiv.style.zIndex = "9999";
    newDiv.style.width = "200px";
    newDiv.style.height = "300px";
    newDiv.style.top = "100px";
    newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px"; // 屏幕居中
    newDiv.style.background = "EEEEEE";
    newDiv.style.border = "1px solid #0066cc";
    newDiv.style.padding = "5px";
    newDiv.innerHTML = "此内容为新激活的弹窗";
    document.body.appendChild(newDiv);
    // mask图层
    var newMask = document.createElement("div");
    newMask.id = m;
    newMask.style.position = "absolute";
    newMask.style.zIndex = "1";
    newMask.style.width = document.body.scrollWidth + "px";
    newMask.style.height = document.body.scrollHeight + "px";
    newMask.style.top = "0px";
    newMask.style.left = "0px";
    newMask.style.background = "#000";
    newMask.style.filter = "alpha(opacity=40)";
    newMask.style.opacity = "0.40";
    document.body.appendChild(newMask);
    // docutment www.codefans.net
    // 关闭mask和新图层
    var newA = document.createElement("a");
    newA.href = "#";
    newA.innerHTML = "关闭激活层";
    newA.onclick = function () {
    document.body.removeChild(docEle(_id));
    document.body.removeChild(docEle(m));
    return false;
    }
    newDiv.appendChild(newA);
    }
    </script>
    <a href="#" onclick="openNewDiv(this);return false;">弹出新层</a>

  • 相关阅读:
    web前段学习2017.6.15
    web前段学习2017.6.13
    web前端2017.6.10
    web前段2017.6.8
    web前段学习2016.6.6
    宏任务与微任务
    浏览器兼容性问题
    TCP 和 UDP 的区别
    React如何渲染大数据量的列表?
    移动端兼容性问题
  • 原文地址:https://www.cnblogs.com/ITzhangyunpeng/p/9364407.html
Copyright © 2011-2022 走看看