<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>重写alert</title>
<style>
div, p {
margin: 0;
padding: 0;
}
div {
background-color: #00bbee;
width: 100px;
height: 100px;
border-radius: 100px;
position: absolute;
left: 50%;
top: 10%;
margin-left: -50px;
}
p {
width: 200px;
color: #00bbee;
position: relative;
bottom: -120px;
right: 50%;
margin-left: 25px;
font-size: 20px;
}
</style>
<script>
window.alert = function (txt, time) {
if (document.getElementById("alertFram")) {
return;
}
var alertDiv = document.createElement("DIV");
alertDiv.id = "alertFram";
alertDiv.style.position = "absolute";
alertDiv.style.left = "50%";
alertDiv.style.top = "40%";
alertDiv.style.marginLeft = "-225px";
alertDiv.style.marginTop = "-75px";
alertDiv.style.width = "450px";
alertDiv.style.height = "150px";
alertDiv.style.background = "#ccc";
alertDiv.style.textAlign = "center";
alertDiv.style.lineHeight = "150px";
alertDiv.style.zIndex = "10000";
alertDiv.innerHTML = "<ul style='list-style:none;margin:0px;padding:0px;width:100%'><li style='background:#DD828D;text-align:left;padding-left:10px;font-size:14px;font-weight:bold;height:27px;line-height:25px;border:1px solid #F9CADE;'>温馨提示</li><li style='background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;'>" + txt + "</li><li style='background:#FDEEF4;text-align:center;font-weight:bold;height:27px;line-height:25px; border:1px solid #F9CADE;'onclick='doOk()'><input type='button' style='background-color: #FDEEF4;border: none;outline:none;' value='确 定'/></li></ul>";
document.body.appendChild(alertDiv);
var c = 0;
this.timer = function () {
if (c++ >= time) {
clearInterval(ad);
document.body.removeChild(alertDiv);
}
}
var ad = setInterval("timer()", 1000);
this.doOk = function () {
document.body.removeChild(alertDiv);
}
alertDiv.focus();
document.body.onselectstart = function () {
return false;
};
}
</script>
</head>
<body>
<div onclick="alert('大家好啊!!!')">
<p>please click it !!!</p>
</div>
</body>
</html>
js弹窗之重写alert
猜你喜欢
转载自blog.csdn.net/echizao1839/article/details/80950939
今日推荐
周排行