普元日记--自定义底部遮罩层

<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.width = document.body.clientWidth + "px";
        newMask.style.height = 200 + "px";


        // newMask.style.top = "0px";
        //newMask.style.left = "0px";
        newMask.style.top = (document.body.scrollTop + document.body.clientHeight / 2 - 200 / 2) + "px";
        newMask.style.left = "0px";




        newMask.style.background = "#33393C";
        newMask.style.filter = "alpha(opacity=40)";
        newMask.style.opacity = "1";
        document.body.appendChild(newMask);






      


        //创建一个3行3列表格
        var divtable = document.createElement("table");
        divtable.style.border = "1px";
        divtable.cellSpacing = "0px";
        divtable.cellPadding = "10px";


        //创建关闭行
        var close_tr = document.createElement("tr");


        var close_td = document.createElement("td");
        close_td.colSpan = 3;
        //创建关闭按钮
        var close_btn = document.createElement("button");
        close_btn.style.cssFloat= "right";
        close_btn.innerHTML = "关闭";
        close_btn.style.backgroundColor = "#AAEE00"
        close_btn.style.width = "80px";
        close_btn.style.height = "20px";




        close_td.appendChild(close_btn);
        close_tr.appendChild(close_td);
        divtable.appendChild(close_tr);






        //创建第一行
        var first_tr = document.createElement("tr");
        //创建1行1列
        var first_td = document.createElement("td");
        first_td.rowSpan= 2;
        //创建第1行中的图片
        var f_img = document.createElement("img");
        f_img.id = "fimg";
        f_img.src = "pic325.jpg";
        f_img.style.width = "180px";
        f_img.style.height = "150px";
       
        //加入到第一列
        first_td.appendChild(f_img);
        //加入到第1行中
        first_tr.appendChild(first_td);


        //创建第1行中第2列
        var s_td = document.createElement("td");
        //1行2列中的BUtton
        var s_b = document.createElement("button");
        s_b.innerHTML = "标题";
        s_b.style.backgroundColor = "#AAEE00"
        s_b.style.width = "80px";
        s_b.style.height = "20px";
        s_td.appendChild(s_b);
        first_tr.appendChild(s_td);
        //创建第1行中第3列
        var s_td3 = document.createElement("td");
        s_td3.rowSpan = 2;
        //1行2列中的BUtton
        var s_b3 = document.createElement("button");
       
        s_b3.style.width = "80px";
        s_b3.style.height = "20px";


        s_b3.innerHTML = "内容";
        s_td3.appendChild(s_b3);
        first_tr.appendChild(s_td3);






        //创建第二行
        var s_tr = document.createElement("tr");
        //创建第二行中的一列
        var s_td2 = document.createElement("td");
        var s_b2 = document.createElement("button");
        s_b2.innerHTML = "详情";
        s_b2.style.width = "80px";
        s_b2.style.height = "20px";


        s_td2.appendChild(s_b2);
        s_tr.appendChild(s_td2);




        divtable.appendChild(first_tr);
        divtable.appendChild(s_tr);
        newMask.appendChild(divtable);
















        //新弹出层


        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 = "弹出层内容 ";






        //创建一个图片
        var img = document.createElement("img");
        img.id = "newimg";
        img.style.width = "100px";
        img.style.height = "100px";
        img.src = "pic325.jpg";
        newDiv.appendChild(img);








        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";




            //遮罩层也底部居中这样达到可以与弹出层一致的动作
            newMask.style.top = (document.body.scrollTop + document.body.clientHeight / 2 + newDivHeight / 2) + "px";
            newMask.style.left = "0px";
        }
        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">显示弹层</a>


    <table border="1" style='border:0px solid #aaa' cellspacing="0" cellpadding="10"> 
        <tr>
            <td colspan='3' ><button style="float:right">关闭</button></td>
        </tr>


        <tr> 
            <td rowspan='3'><img src="pic325.jpg" width="200px" height="200px" /></td> 
            <td><button>标题</button></td> 
            <td rowspan='2'><button>详情</button></td> 
        </tr> 
        <tr> 
            <td ><button>内容</button></td> 
        </tr> 
        
    </table> 










  <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>