JavaScript模拟系统弹出框，顺便操作dom练练手

最近一段时间里，闲着无事，顺便写了个小demo练了练手，来操作dom，分享之。
HTML：
 
"http://www.w3.org/TR/html4/loose.dtd">

   
       
       
       
   
   
       

       

                               

       
       
   

 
JavaScript：
 
/**
 * @author xiangwenwen
 */
var index = {
    //初始化
    int:function(){
        //body高
        var body = document.body;
        var bodyHeight = body.scrollHeight;
        //onclick父容器
        var on = document.getElementById("on");
        on.style.position = "relative";
        on.style.zIndex = "5";
        //状态父容器
        var min = document.getElementById("min");
        min.style.display = "none";
        min.style.position = "absolute";
        min.style.zIndex = "10";
        min.style.height = bodyHeight + "px";
        min.style.display = "none";
        //透明层 www.2cto.com
        var dodiv = document.createElement("div");
        dodiv.setAttribute("id","opmint");
        min.appendChild(dodiv);
        var opmint = document.getElementById("opmint");
        opmint.style.height = bodyHeight + "px";
        opmint.style.width = "100%";
        opmint.style.background = "#000";
        //垂直居中div1
        var div = document.createElement("div");
        div.setAttribute("id","admint");
        min.appendChild(div);
        var admint = document.getElementById("admint");
        admint.style.position = "absolute";
        admint.style.width = "300px";
        admint.style.height = "50px";
        admint.style.border = "4px solid #963";
        admint.style.top = "50%";
        admint.style.left = "50%";
        admint.style.marginTop = "-25px";
        admint.style.marginRight = "0px";
        admint.style.marginBottom = "0px";
        admint.style.marginLeft = "-150px";
        admint.style.display = "none";
        //关闭按钮1
        var a = document.createElement("a");
        a.setAttribute("href","#");
        a.setAttribute("id","close");
        admint.appendChild(a);
        var aclose = document.getElementById("close");
        aclose.innerHTML = "关闭";
        aclose.onclick = function(){
            admint.style.display = "none";
            min.style.display = "none";
        }
        //垂直居中div2
        var div2 = document.createElement("div");
        div2.setAttribute("id","addiv2");
        min.insertBefore(div2,min.childNodes[2]);
        var addiv2 = document.getElementById("addiv2");
        addiv2.style.position = "absolute";
        addiv2.style.width = "300px";
        addiv2.style.height = "50px";
        addiv2.style.border = "4px solid #789";
        addiv2.style.top = "50%";
        addiv2.style.left = "50%";
        addiv2.style.marginTop = "-25px";
        addiv2.style.marginRight = "0px";
        addiv2.style.marginBottom = "0px";
        addiv2.style.marginLeft = "-150px";
        addiv2.style.display = "none";
        //关闭按钮2
        var a2 = document.createElement("a");
        a2.setAttribute("id","a2close");
        a2.setAttribute("href","#");
        addiv2.appendChild(a2);
        var a2close = document.getElementById("a2close");
        a2close.innerHTML = "关闭";
        a2close.onclick = function(){
            addiv2.style.display = "none";
            min.style.display = "none";
        }
    },
   
    //背景透明
    setOpacity:function(node,level){
        node = typeof node == "string" ? document.getElementById(node) : node;
        if (document.all) {
            node.style.filter = "alpha(opacity ="+ level +")";
        } else{
            node.style.opacity = level / 100;
        };
    },
   
    //初始化点击状态
    OnclickAll:function(){
        var onmin = document.getElementById("min");
        var onck = document.getElementById("on");
        var adon = onck.getElementsByTagName("a");
        var adclose = document.getElementById("admint");
        var acclose = document.getElementById("addiv2");
        adon[0].onclick = function(){
            onmin.style.display = "block";
            adclose.style.display = "block";
        }
        adon[1].onclick = function(){
            onmin.style.display = "block";
            acclose.style.display = "block";
        }
    }
}
 
对于dom的增删改查，上述代码中木有改，方法是replaceChild()两个参数，一个是要插入的节点，二个是要替换的节点。这方法是用于删除后替换一个节点，如果不想替换，只需求删除，直接上removeChild()。
 
 
 
业精于勤，荒于嬉。行成于思，毁于随。新人的成长，在于总结。所有文章与例子，仅是自我总结，都仅供学习交流。