JavaScript類比系統彈出框，順便操作dom練練手

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

最近一段時間裡，閑著無事，順便寫了個小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="#">Onclick1</a>            <a href="#">Onclick2</a>        </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";        //透明層        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()。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More