JavaScript simulates system pop-up boxes, and you can practice operating DOM by the way.

最近一段时间里，闲着无事，顺便写了个小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";
        }
}
}

For the addition, deletion, modification and query of dom, there is no change in the above code. The method is replaceChild() with two parameters, one is the node to be inserted, and the other is the node to be replaced. This method is used to replace a node after deletion. If you don’t want to replace it, you just need to delete it and use removeChild() directly.



Diligence leads to excellence in work, but playfulness leads to waste. Actions are accomplished by thinking, destroyed by following. The growth of new people lies in summary. All articles and examples are only self-summaries and are for learning and communication purposes only.