zoukankan      html  css  js  c++  java
  • 重写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>
  • 相关阅读:
    zookeeper配置
    redis前端启动和后台启动的区别
    SpringMVC接受JSON参数详解及常见错误总结我改
    SpringMVC @RequestBody接收Json对象字符串
    spring MVC 如何接收前台传入的JSON对象数组
    springMVC 接收json字符串参数
    mysql数据库user表host字段的%问题
    mysql.user表中Host为%的含义
    开店攻略: 零售店铺经营的三大原则
    开店攻略: 如何巧妙接近顾客
  • 原文地址:https://www.cnblogs.com/JioNote/p/12209648.html
Copyright © 2011-2022 走看看