html更改彈窗樣式（原創，轉載需聲明）

時間 2019-12-13

標籤 html 更改樣式原創轉載聲明欄目 HTML 简体版

原文原文鏈接

代碼以下：css

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5學堂 - alert</title>
</head>
<body>
    <script>
        window.alert = alert;
        function alert(data) {
            var a = document.createElement("div"),
                title = document.createElement("p"),
                content = document.createElement("p"),
                btn = document.createElement("div"),
                textNode = document.createTextNode(data ? data : ""),
                btnText = document.createTextNode("肯定");
            // 控制樣式
            css(a, {
                "width" : "430px",
                "height" : "120px",
                "border": "1px solid #000",
                "margin" : "0 auto"
            });
            css(btn, {
                "background-color": "#008CBA",
                "border": "none",
                "color": "white",
                "padding": "8px 28px",
                "text-align": "center",
                "text-decoration": "none",
                "display": "inline-block",
                "font-size": "8px",
                "float" : "right"
            });
            css(title, {
                "font-size" : "18px",
                "width" : "250px",
                "height" : "20px"
            });
            css(content, {
                "font-size" : "14px",
                "width" : "250px",
                "height" : "20px",
                "text-align": "center"
            })

            // 內部結構套入
            title.appendChild(document.createTextNode("友情提示："));
            content.appendChild(textNode);
            btn.appendChild(btnText);
            a.appendChild(title);
            a.appendChild(content);
            a.appendChild(btn);
            // 總體顯示到頁面內
            document.getElementsByTagName("body")[0].appendChild(a);

            // 肯定綁定點擊事件刪除標籤
            btn.onclick = function() {
                a.parentNode.removeChild(a);
            }
        }
        function css(targetObj, cssObj) {
            var str = targetObj.getAttribute("style") ? targetObj.getAttribute("style") : "";
            for(var i in cssObj) {
                str += i + ":" + cssObj[i] + ";";
            }
            targetObj.style.cssText = str;
        }
        alert("用戶名不能爲空");
    </script>
</body>
</html>