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>
这是效果图
当b等于0的图片
当b等于1的图片
这是需要的图片：
