改写js原装的alert样式

时间：2016-06-23 12:42:50 阅读：280 评论：0 收藏：0 [点我收藏+]

标签：

1.将下面的js代码单独到一个js文件中，然后在页面中引用

AlertDialog.js

//改写js原装的alert样式
var t;
var timeclose = 0;
var showBackTime = 0;
var showTime;

window.alert = function (s, a, b, c) {
    if (s.indexOf("操作失败：[object Object]") >= 0) {
        return;
    }
    if (s == "out") {
        return;
    }
    var d = "";
    var e = false;
    s = s.replace("‘", " ");
    if (s == "request error") {
        s = "请求失败，请刷新页面或重试";
        e = true;
    }
    if (s.indexOf("商品已成功加入购物车") > -1) {
        s += "<br /><a class=\"gdtit\" href=\"javascript:;\"><input name=\"btnbutton\" id=\"hwlGo1332\" type=\"button\" class=\"butn5\" onclick=\"goShoppingFromCheck(5)\" /></a>  <a class=\"gdtit\" href=\"javascript:;\"><input name=\"btnbutton\" type=\"button\" id=\"hwlGo1333\" class=\"butn17\" onclick=\"CloseAlter()\" /></a>"
    }
    d += "<table cellspacing=\"0\" cellpadding=\"0\" align=\"center\"><tbody><tr><td>";
    if (a == 1) {
        d += "<span class=\"pop_c4\"></span>";
    } else {
        d += "<span class=\"pop_c3\"></span>";
    }
    d += "</td><td class=\"align-vm align-tl lh25\">" + s + "</td></tr></tbody></table>";
    $("#title").html("- 系统提示 -");
    $("#clearing").html("");
    $("#gray").html("");
    $("#ErrorShow").html(d);
    if (s.indexOf("<script>") == -1) {
        $("#showError").show();
        ShowBack();
    }
    if (b != null) {
        if (b == 1) {
            $("#closeAlertSp").attr(‘onclick‘, ‘‘).click(function () {
                CloseAlter(1);
            });
        } else {
            $("#closeAlertSp").attr(‘onclick‘, ‘‘).click(function () {
                CloseAlter(b);
            });
        }
    }
    if (c) {
        setTimeout(function () {
            CloseAlter();
        },
        c);
    }
    timeclose = -2;
    SettimeCloseAlter();
};
function ShowBack() {
    SetShowBack();
    $("#greybackground").show();
}

function SetShowBack() {
    var a = $(document).height();
    var b = $(document).width();
    var c = document.documentElement.clientWidth == 0 ? document.body.clientWidth : document.documentElement.clientWidth;
    var d = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
    var e = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
    $("#greybackground").css({
        "opacity": "0.5",
        "height": a,
        "width": b + d
    });
    showTime = setTimeout(SetShowBack, 1000);
}
function HideBack() {
    $("#greybackground").hide();
    timeclose = 0;
    clearTimeout(showTime);
}

function CloseAlter(a) {
    $("#ErrorShow").html("");
    $("#showError").hide();
    HideBack();
    timeclose = 0;
    clearTimeout(t);
    if (a == 1) {
        window.location.href = window.location.href;
        return false;
    } else if (a != "" && a != null) {
        window.location.href = a;
        return false;
    }
}

function SettimeCloseAlter() {
    if (timeclose < 0) { } else if (timeclose < 3) {
        t = setTimeout(SettimeCloseAlter, 800);
        timeclose++;
    } else {
        CloseAlter();
        timeclose = 0;
    }
}

2.html代码记得引用Jquery库

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        #showError {
            left: 50%;
            margin-left: -200px !important;
            margin-top: -150px !important;
            position: fixed;
            top: 50%;
            z-index: 9999;
        }
        .pop_new {
            clear: both;
            position: relative;
            width: 492px;
            z-index: 2;
        }
        .pop_new .pop_close {
            position: absolute;
            right: 0;
            top: 0;
            z-index: 3;
        }
        a {
            color: #666;
            outline: medium none;
            text-decoration: none;
        }
        a img {
            border: 0 none;
        }

        img {
            font-size: 12px;
            vertical-align: middle;
        }
        .pop_box {
            float: left;
            margin-top: 15px;
            width: 477px;
        }
        .pop_box .title {
            background-color: #336601;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            height: 33px;
            line-height: 33px;
            padding-left: 8px;
        }

        .pop_box ul {
            margin: 0;
            padding: 0;
        }

        ul, li {
            margin: 0;
            padding: 0;
            vertical-align: bottom;
        }

        .pop_box .detail {
            background-color: #fff;
            border-left: 3px solid #669934;
            border-right: 3px solid #669934;
            float: left;
            padding: 30px 35px;
            width: 401px;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        .lh25 {
            line-height: 25px;
        }

        .align-tl {
            text-align: left;
        }

        .align-vm {
            vertical-align: middle;
        }

        td {
            font-family: Arial;
        }

        .pop_c3 {
            background: rgba(0, 0, 0, 0) url("/Content/images/pop_sigh.gif") no-repeat scroll 0 0;
        }

        .pop_c3, .pop_c4 {
            display: inline-block;
            height: 50px;
            padding-bottom: 5px;
            padding-right: 15px;
            width: 50px;
        }
        .pop_box .clearing {
            border-left: 3px solid #669934;
            border-right: 3px solid #669934;
            float: left;
            width: 471px;
        }
        .pop_c4 {
            background: rgba(0, 0, 0, 0) url("/Content/images/pop_yes.gif") no-repeat scroll 0 0;
        }
        .pop_box .gray {
            background-color: #e0ebd7;
            border-bottom: 3px solid #669934;
            border-left: 3px solid #669934;
            border-right: 3px solid #669934;
            float: left;
            padding: 0 6px;
            width: 459px;
        }
    </style>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script src="Content/js/AlertDialog.js"></script>
</head>
<body>
    <!--alert弹出窗 开始 alert(a,b) a表示提示信息，b有两个值：当b等于0的时候是警告图片，当b等于1的时候是成功的图片-->
    <a onclick="alert(‘123‘,‘1‘)">测试</a>
    <div style="top: 40%; display: none;" id="showError" class="pop_new">
        <div class="pop_close">
            <a style="cursor: pointer" onclick="CloseAlter()" data-type="closeAlter" id="closeAlertSp">
                <img width="37" height="37" class="ie6png" src="/Content/images/pop_close.png">
            </a>
        </div>
        <div style="background-color: rgb(255, 255, 255);" class="pop_box">
            <ul id="title" class="title">- 系统提示 -</ul>
            <ul id="ErrorShow" class="detail"><table cellspacing="0" cellpadding="0" align="center"><tbody><tr><td><span class="pop_c3"></span></td><td class="align-vm align-tl lh25">123</td></tr></tbody></table></ul>
            <ul id="clearing" class="clearing"></ul>
            <ul id="gray" class="gray"></ul>
        </div>
    </div>
</body>
</html>