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>

  • 相关阅读:
    利用同步辅助类CountDownLatch计算多线程的运行时间
    i++的原子性问题
    Volatile关键字以及线程的内存可见性问题
    创建线程的第三种方式以及简单使用
    java8新特性-lambda表达式和stream API的简单使用
    springboot整合activemq
    springboot整合redis单机及集群
    JAVA-基础(一)
    CentOS-文件操作
    理解AngularJS的作用域Scope
  • 原文地址:https://www.cnblogs.com/ITzhangyunpeng/p/9364407.html
Copyright © 2011-2022 走看看