改写js原装的alert样式

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\" οnclick=\"goShoppingFromCheck(5)\" /></a>  <a class=\"gdtit\" href=\"javascript:;\"><input name=\"btnbutton\" type=\"button\" id=\"hwlGo1333\" class=\"butn17\" οnclick=\"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的图片

这是需要的图片：

转载于:https://www.cnblogs.com/LoveQin/p/5610073.html

改写js原装的alert样式相关推荐

修改 javascript 中alert样式
2019独角兽企业重金招聘Python工程师标准>>> 如何更改js的alert样式如:弹出对话框时的背景颜色.背景透明等等,下面有效果图,感兴趣的朋友可以学习下 window.al ...
bind-html自动换行,vue element ui this.$alert 样式修改，长词自动换行、自定义htm
vue element ui this.$alert 样式修改,长词自动换行.自定义htm vue element ui this.$alert 样式修改,长词自动换行.自定义html标签无效果问题 ...
解决nginx部署后css、js、图片等样式不加载的问题
解决nginx部署后css.js.图片等样式不加载的问题参考文章: (1)解决nginx部署后css.js.图片等样式不加载的问题 (2)https://www.cnblogs.com/smallf ...
JS添加/修改CSS样式
JS添加/修改CSS样式是通过.style.xxxx属性=值来实现的,记得是等号赋值. document.getElementById("xx").style.xxx=xxxxx; ...
如何通过js改变css样式,如何通过JS 动态改变CSS样式
如何通过JS 动态改变CSS样式0 豆豆dou...2013.09.15浏览640次分享举报 .TLIWREGION3CSS { position:absolute; left:32px; top:4 ...
ios webview html交互卡死,iOS 之webview 的js交互（alert、confirm、prompt）弹窗造成界面卡死...
概述:当iOS客户端中webView 与js交互,在主线程执行js脚本时,而js脚本存在alert().confirm().prompt()这三种弹窗时会造成iOS界面卡死. 1.造成卡死时的代码如下 ...
js 设置html标签样式表,js怎么设置css样式？
js怎么设置css样式?本篇文章就给大家介绍js设置css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.直接设置style对象(内联样式) 使用JavaScript ...
js函数改变html样式,js可以改css样式吗？
js可以改css样式.在很多情况下,都需要对网页上元素的样式进行动态的修改:而JavaScript可以动态的修改样式.下面本篇文章就来给大家介绍几种JavaScript中修改CSS样式的方法,希望对大 ...
JS获取元素CSS样式
获取元素CSS样式的方法说到在js里修改css样式的属性,我第一个想的是.style属性.然后去具体的修改字体的样式,背景颜色等样式,最近在做一个练习的时候涉及到了这部分的知识. 一·首先style ...
用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）
CSS样式定义方法大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. 1 < ...

改写js原装的alert样式

改写js原装的alert样式相关推荐

最新文章

热门文章