js弹窗之重写alert

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重写alert</title>
    <style>
        div, p {
            margin: 0;
            padding: 0;
        }

        div {
            background-color: #00bbee;
            width: 100px;
            height: 100px;
            border-radius: 100px;
            position: absolute;
            left: 50%;
            top: 10%;
            margin-left: -50px;

        }

        p {
            width: 200px;
            color: #00bbee;
            position: relative;
            bottom: -120px;
            right: 50%;
            margin-left: 25px;
            font-size: 20px;
        }

    </style>
    <script>
        window.alert = function (txt, time) {
            if (document.getElementById("alertFram")) {
                return;
            }
            var alertDiv = document.createElement("DIV");
            alertDiv.id = "alertFram";
            alertDiv.style.position = "absolute";
            alertDiv.style.left = "50%";
            alertDiv.style.top = "40%";
            alertDiv.style.marginLeft = "-225px";
            alertDiv.style.marginTop = "-75px";
            alertDiv.style.width = "450px";
            alertDiv.style.height = "150px";
            alertDiv.style.background = "#ccc";
            alertDiv.style.textAlign = "center";
            alertDiv.style.lineHeight = "150px";
            alertDiv.style.zIndex = "10000";
            alertDiv.innerHTML = "<ul style='list-style:none;margin:0px;padding:0px;width:100%'><li style='background:#DD828D;text-align:left;padding-left:10px;font-size:14px;font-weight:bold;height:27px;line-height:25px;border:1px solid #F9CADE;'>温馨提示</li><li style='background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;'>" + txt + "</li><li style='background:#FDEEF4;text-align:center;font-weight:bold;height:27px;line-height:25px; border:1px solid #F9CADE;'onclick='doOk()'><input type='button' style='background-color: #FDEEF4;border: none;outline:none;' value='确 定'/></li></ul>";
            document.body.appendChild(alertDiv);
            var c = 0;
            this.timer = function () {
                if (c++ >= time) {
                    clearInterval(ad);
                    document.body.removeChild(alertDiv);
                }
            }
            var ad = setInterval("timer()", 1000);
            this.doOk = function () {
                document.body.removeChild(alertDiv);
            }
            alertDiv.focus();
            document.body.onselectstart = function () {
                return false;
            };
        }
    </script>
</head>
<body>
<div onclick="alert('大家好啊!!!')">
    <p>please click it !!!</p>
</div>
</body>
</html>
猜你喜欢
