zoukankan      html  css  js  c++  java
  • 弹出层

    <script type="text/javascript">
    var docEle = function()
    {
        return document.getElementById(arguments[0]) || false;
    }

    function openNewDiv(_id)
    {
        var m = "mask";
        if (docEle(_id)) document.body.removeChild(docEle(_id));
        if (docEle(m)) document.body.removeChild(docEle(m));
       
        //mask遮罩层

        var newMask = document.createElement("div");
        newMask.id = m;
        newMask.style.position = "absolute";
        newMask.style.zIndex = "1";
        _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
        _scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
        newMask.style.width = _scrollWidth + "px";
        newMask.style.height = _scrollHeight + "px";
        newMask.style.top = "0px";
        newMask.style.left = "0px";
        newMask.style.background = "#33393C";
        newMask.style.filter = "alpha(opacity=40)";
        newMask.style.opacity = "0.40";
        document.body.appendChild(newMask);
       
        //新弹出层

        var newDiv = document.createElement("div");
        newDiv.id = _id;
        newDiv.style.position = "absolute";
        newDiv.style.zIndex = "9999";
        newDivWidth = 400;
        newDivHeight = 200;
        newDiv.style.width = newDivWidth + "px";
        newDiv.style.height = newDivHeight + "px";
        newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
        newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
        newDiv.style.background = "#EFEFEF";
        newDiv.style.border = "1px solid #860001";
        newDiv.style.padding = "5px";
        newDiv.innerHTML = "弹出层内容 ";
        document.body.appendChild(newDiv);
       
        //弹出层滚动居中

        function newDivCenter()
        {
            newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
            newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
        }
        if(document.all)
        {
            window.attachEvent("onscroll",newDivCenter);
        }
        else
        {
            window.addEventListener('scroll',newDivCenter,false);
        }
       
        //关闭新图层和mask遮罩层

        var newA = document.createElement("a");
        newA.href = "#";
        newA.innerHTML = "关闭";
        newA.onclick = function()
        {
            if(document.all)
            {
                window.detachEvent("onscroll",newDivCenter);
            }
            else
            {
                window.removeEventListener('scroll',newDivCenter,false);
            }
            document.body.removeChild(docEle(_id));
            document.body.removeChild(docEle(m));
            return false;
        }
        newDiv.appendChild(newA);
    }
    </script>
    <body>
    <a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">qifei弹层</a>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">qifei弹层</a>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">qifei弹层</a>
    </body>

  • 相关阅读:
    cocos2d-x3.6 连连看连通画线
    POJ输出状态的逻辑。
    BeanUtils数据封装与表单JavaBean
    二分法查找 --JS 实现
    Unix/Linux环境C编程新手教程(5) Red Hat Enterprise Linux(RHEL)环境搭建
    我们都傻不啦叽为《围住神经猫》免费推广!
    updating error reports database解决方案
    nutwk的maven中央仓库及配置
    Maven error in eclipse (pom.xml) : Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.12.4
    SFTP环境搭建及客户代码调用公共方法封装
  • 原文地址:https://www.cnblogs.com/tangself/p/1620316.html
Copyright © 2011-2022 走看看