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>

  • 相关阅读:
    [bzoj1054][HAOI2008]移动玩具
    atal error C1083: 无法打开包括文件:“stdint.h”
    诛仙手游宝石和灌注性价比分析
    诛仙手游攻略
    商务沟通方法与技巧
    韩服LOL符文翻译
    如何关闭"QQ网购每日精选"信息提醒
    LOL 韩服下载地址
    [经验分享] YY客服联系方式
    广州打印社保明细-网上打印-社保局地址
  • 原文地址:https://www.cnblogs.com/ITzhangyunpeng/p/9364407.html
Copyright © 2011-2022 走看看