可以自己编辑自己想要样式。
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;
};
$("#title").html("提示");
$("#clearing").html("<button class='clearBut'>确定</button>");
$("#gray").html("");
$("#ErrorShow").html(d);
if (s.indexOf("<script>") == -1) {
$("#showError").show();
ShowBack();
}
$("#clearing").attr('onclick', '').click(function () {
CloseAlter(b);
});
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;
}
}
html dome
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>alert</title>
<link type="text/css" rel="stylesheet" href="./alertCss.css">
<style type="text/css">
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="alertJs.js"></script>
<script type="text/javascript" >
$(function () {
alert("123123")
})
</script>
</head>
<body>
<!--alert弹出窗 开始 alert(a,b) a表示提示信息,b有两个值:当b等于0的时候是警告图片,当b等于1的时候是成功的图片-->
<!-- <a onclick="alert('888')">测试</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">
x
</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"></td></tr></tbody></table></ul>
<ul id="clearing" class="clearing"></ul>
<ul id="gray" class="gray"></ul>
</div>
</div>
</body>
</html>
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: 20px;
top: 20px;
z-index: 3;
color: white;
}
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: #3290d1;
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 #3290d1;
border-right: 3px solid #3290d1;
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 #3290d1;
border-right: 3px solid #3290d1;
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: #3290d1;
border-bottom: 3px solid #3290d1;
border-left: 3px solid #3290d1;
border-right: 3px solid #3290d1;
float: left;
padding: 0 6px;
width: 459px;
}
.clearBut {
display: block;
width: 100px;
height: 30px;
border: none;
clear: white;
color: white;
background: #3290d1;
border-radius: 5px;
float: right;
margin-right: 10px;
margin-bottom: 10px;
}