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>

  • 相关阅读:
    zTree 优秀的jquery树插件
    The underlying provider failed on open 问题解决
    HTML 5 <input> list 属性
    C#拖曳控件加载,bll报错问题
    把VS2010的智能代码提示和注解从英文变成中文
    progressBar的使用
    C++内存读写例子
    bash 管理小脚本
    KVM虚拟机配置笔记
    Ettercap 实施中间人攻击
  • 原文地址:https://www.cnblogs.com/top5/p/1676795.html
Copyright © 2011-2022 走看看