重写alert,自定义js中alert,美化alert
要重写JavaScript中的alert
函数,可以创建一个自定义函数来显示自定义警告框,并替换页面上的alert
函数。以下是一个简单的示例,使用了prompt
样式来实现自定义的alert
功能:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Alert</title>
<style>
.custom-alert {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<button onclick="customAlert('Hello, this is a custom alert!')">Show Custom Alert</button>
<script>
function customAlert(message) {
// 创建一个alert元素
var alertDiv = document.createElement('div');
alertDiv.innerText = message;
alertDiv.className = 'custom-alert';
// 将其添加到文档中
document.body.appendChild(alertDiv);
// 设置3秒后关闭警告框
setTimeout(function() {
alertDiv.parentNode.removeChild(alertDiv);
}, 3000);
}
// 替换window.alert
window.alert = function(message) {
customAlert(message);
};
</script>
</body>
</html>
在这个例子中,我们创建了一个名为customAlert
的函数,它接受一个消息作为参数,并显示一个带有样式的自定义警告框。然后,我们覆盖了window.alert
方法,使得调用alert()
时实际上调用的是我们的自定义函数。
这只是一个基本示例,您可以根据需要添加更多功能,例如关闭按钮、动画效果、更复杂的样式等。
评论已关闭