首頁 > 開發者 > JavaScript

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

來源：互聯網
上載者：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";
        //透明層 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()。
 
 
 
業精於勤，荒於嬉。行成于思，毀於隨。新人的成長，在於總結。所有文章與例子，僅是自我總結，都僅供學習交流。

 


摘自 飛舞輕揚在台北

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

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： 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