更改JavaScript警报()或提示符()的外观
更改JavaScript警报()或提示符()的外观
提问于 2011-08-14 12:22:02
有没有办法改变警报或提示符在JavaScript中的外观？比如添加一个图像，改变字体颜色或大小，以及任何会使它看起来不同的东西。
回答 4
Stack Overflow用户
发布于 2012-06-09 07:36:56
在扩展Matthew的想法时，我突然想到，您想要的答案是使用普通的旧Javascript而不使用任何框架。下面是一个快速而肮脏的页面，它发出一个div，带有一个简单的关闭按钮，并显示在中间的消息：
alertBox和alertClose按钮的粗CSS
#alertBox{
position:absolute;
top:100px;
left:100px;
border:solid 1px black;
background-color: #528CE0;
padding: 50px;
visibility: hidden;
}
#alertClose{
position: absolute;
right:0;
top: 0;
background-color: black;
border: solid 1px white;
color: white;
width: 1em;
text-align: center;
cursor: pointer;
}然后，一些javascript覆盖内置的警报函数，并提供一个关闭函数来处理alertClose上的单击事件。
function closeAlertBox(){
alertBox = document.getElementById("alertBox");
alertClose = document.getElementById("alertClose");
alertBox.style.visibility = "hidden";
alertClose.style.visibility = "hidden";
}
window.alert = function(msg){
var id = "alertBox", alertBox, closeId = "alertClose", alertClose;
alertBox = document.createElement("div");
document.body.appendChild(alertBox);
alertBox.id = id;
alertBox.innerHTML = msg;
alertClose = document.createElement("div");
alertClose.id = closeId;
alertClose.innerHTML = "x";
alertBox.appendChild(alertClose);
alertBox.style.visibility = "visible";
alertClose.style.visibility = "visible";
alertClose.onclick = closeAlertBox;
};正如Matthew建议的那样，调用alert，现在显示您刚刚创建的div，单击x可以使它不可见。
alert("hello from the dummy alert box.");要实现，您需要在警报函数中进行测试，以确保您不会重新创建div一百万次，并且需要使用CSS来使其适合您的配色方案等等，但这是如何实现您自己的警报框的粗略形状。
在我看来，这似乎有些过火了，我同意Matthew的观点，从长远来看，用jQuery或YUI这样的著名框架创建的对话或模态元素会更好、更容易。
Stack Overflow用户
发布于 2011-08-14 12:25:48
alert和prompt函数调用浏览器提供的API，因此您将无法控制它们的外观。
不过，您可以做的是重新定义这些函数，而可能使用类似于jQuery模式的方法，例如：
window.alert = function(message) {
// Launch jQuery modal here..
};
window.prompt = function(message) {
// Launch jQuery modal here..
};Stack Overflow用户
发布于 2011-08-14 13:21:19
您不能修改它；但是您可以使用类似于showModalDialog的东西，它只需要一个URI来加载您想要的hmtl/css表单(如果您可以将它保存在一个单独的页面中)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7056770
复制相关文章
相似问题
腾讯云开发者
