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>

  • 相关阅读:
    第四周学习总结
    第三周学习总结
    第二周学习总结
    第一周学习总结
    解决pycharm中导入Wordcloud库的时候失败的问题
    开发报告5
    TypeError: _cache_value_encoder: not supported type: <class 'numpy.ndarray'>
    pandas中的rename_axis用法
    金叉死叉量化交易--matplotlib绘图案例
    一、EDA分析
  • 原文地址:https://www.cnblogs.com/top5/p/1676795.html
Copyright © 2011-2022 走看看