重写alert弹窗

时间:2020-01-18
本文章向大家介绍重写alert弹窗,主要包括重写alert弹窗使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

效果图:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>重写alert弹窗</title>
</head>

<body>
    <script>
        // window.alert = alert;
        // function alert(data) {
        //     var parent_div = document.createElement("div"),
        //         title_p = document.createElement("p"),
        //         name_p = document.createElement("p"),
        //         time_p = document.createElement("p"),
        //         title_text = document.createTextNode(data ? "执行状态:"+data : ""),
        //         name_text = document.createTextNode(data ? "操作人:"+data : ""),
        //         time_text = document.createTextNode(data ? "操作时间:"+data : ""),
        //         btn_div = document.createElement("div"),
        //         btnText = document.createTextNode("确定");
        //     // 控制样式
        //     css(parent_div, {
        //         "position" : "fixed",
        //         "left" : "70%",
        //         "right" : "0",
        //         "top" : "20%",
        //         "width" : "15%",
        //         "margin" : "0 auto",
        //         "background-color" : "#ffffff",
        //         "font-size" : "20px",
        //         "text-align" : "center",
        //         "border":"1px solid darkcyan"
        //     });
        //     css(btn_div, {
        //         "background" : "#00b8ff",
        //     })
        //     // 内部结构套入
        //     title_p.appendChild(title_text);
        //     name_p.appendChild(name_text);
        //     time_p.appendChild(time_text);
        //     btn_div.appendChild(btnText);
        //     parent_div.appendChild(title_p);
        //     parent_div.appendChild(name_p);
        //     parent_div.appendChild(time_p);
        //     parent_div.appendChild(btn_div);
        //     // 整体显示到页面内
        //     document.getElementsByTagName("body")[0].appendChild(parent_div);

        //     // 确定绑定点击事件删除标签
        //     btn_div.onclick = function() {
        //         parent_div.parentNode.removeChild(parent_div);
        //     }
        //     //自动清除
        //     setTimeout(function(){
        //         parent_div.parentNode.removeChild(parent_div);
        //     },2000);
        // }
        // 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(123);
        ////右弹窗///
        function right_alert(data) {
            var parent_div = document.createElement("div"),
                title_p = document.createElement("p"),
                name_p = document.createElement("p"),
                time_p = document.createElement("p"),
                // title_text = document.createTextNode(data ? "执行状态:" + data.LifeLinkChildName : ""),
                // name_text = document.createTextNode(data ? "操作人:" + data.AuditUserName : ""),
                // time_text = document.createTextNode(data ? "操作时间:" + data.AuditDate.substring(0,19).replace("T","  "): ""),
                title_text = document.createTextNode(data ? "执行状态:" + data : ""),
                name_text = document.createTextNode(data ? "操作人:" + data : ""),
                time_text = document.createTextNode(data ? "操作时间:" + data : ""),
                btn_div = document.createElement("div"),
                btnText = document.createTextNode("确定");
            // 控制样式
            css(parent_div, {
                "padding-top": "21px",
                "position": "fixed",
                "left": "70%",
                "right": "0",
                "top": "25%",
                "width": "19%",
                "margin": "0 auto",
                "background-color": "#ffffff",
                "font-size": "20px",
                "text-align": "center",
                "border": "10px outset #a3b1b1"
            });
            css(btn_div, {
                "background": "#00b8ff",
            })
            // 内部结构套入
            title_p.appendChild(title_text);
            name_p.appendChild(name_text);
            time_p.appendChild(time_text);
            btn_div.appendChild(btnText);
            parent_div.appendChild(title_p);
            parent_div.appendChild(name_p);
            parent_div.appendChild(time_p);
            parent_div.appendChild(btn_div);
            // 整体显示到页面内
            document.getElementsByTagName("body")[0].appendChild(parent_div);

            // 确定绑定点击事件删除标签
            btn_div.onclick = function () {
                parent_div.parentNode.removeChild(parent_div);
            }
            //自动清除
            setTimeout(function () {
                parent_div.parentNode.removeChild(parent_div);
            }, 2000);
        };
        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;
        }
        right_alert(123)
    </script>
</body>

</html>

原文地址:https://www.cnblogs.com/YCiCi/p/12209648.html