zoukankan      html  css  js  c++  java
  • JavaScript 弹出层,背景变暗

    JavaScript 弹出层,背景变暗,代码不算多,根据你的需要调整一下,这里只是实现了基础的思路,美化不是太好。

    <title>JavaScript 弹出层,背景变暗</title>
    <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(newDiv);return false;">弹出新层</a>

  • 相关阅读:
    斯坦福机器学习视频之线性回归习题详解
    linuxc程序设计之passwd与shadow解析(转)
    DeepLearning之MLP解析
    The Linux Environment之getopt_long()
    插入排序
    堆排序
    归并排序
    快速排序
    CyclicBarrier与CountDownLatch的区别
    判断是否是平衡二叉树(左子树与右子树高度不大于1)
  • 原文地址:https://www.cnblogs.com/top5/p/1676795.html
Copyright © 2011-2022 走看看