JavaScript模拟系统弹出框，顺便操作dom练练手-js教程-PHP中文网

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

高洛峰

发布： 2016-11-26 11:58:29

原创

1362人浏览过

最近一段时间里，闲着无事，顺便写了个小demo练了练手，来操作dom，分享之。
html：

<!doctype html public "-//w3c//dtd html 4.01 transitional//en"
"http://www.w3.org/tr/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>new web project</title>
        <style type="text/css">
            body{margin: 0px;padding: 0px;font-family: "微软雅黑";}
            a{text-decoration: none;color: #333; }
            a:hover{color: #936;}
            .op{width: 100%;height: auto;}
        </style>
    </head>
    <body>
        <div class="op" id="min"></div>
        <div class="on" id="on">
            <a href="http://www.php1.cn/">             <a href="http://www.php1.cn/">         </div>
        <script type="text/javascript" src="index.js"></script>
        <script type="text/javascript">
            window.onload = function()
            {
                index.int();
                index.setopacity("opmint","10");
                index.onclickall();
            }
        </script>
    </body>
</html>

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()。

业精于勤，荒于嬉。行成于思，毁于随。新人的成长，在于总结。所有文章与例子，仅是自我总结，都仅供学习交流。