改变 JavaScript Alert() 或 Prompt() 的外观
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7056770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing the way a JavaScript Alert() or Prompt() looks
提问by
Is there any way to change the looks of an alertor promptin JavaScript? Things like adding an image, changing the font color or size, and whatever will make it look different.
有没有办法在 JavaScript 中更改警报或提示的外观 ？诸如添加图像、更改字体颜色或大小以及任何会使它看起来不同的事情。
回答by DavidHyogo
Expanding on Matthew Abbott's idea, it struck me that you want an answer that uses plain old Javascript without recourse to any frameworks. Here's a quick and dirty page that emits a div with a simple close button and the message presented in the centre:
扩展 Matthew Abbott 的想法，我突然想到您想要一个使用简单的旧 Javascript 而不求助于任何框架的答案。这是一个快速而肮脏的页面，它发出一个带有简单关闭按钮的 div 和显示在中心的消息：
Rough CSS for the alertBox and the alertClose button
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;
}
Then some javascript to override the built-in alert function and provide a closing function to handle the click event on alertClose.
然后一些 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;
};
Calling alert, as Matthew Abbott suggested, now displays the div you've just created and clicking the x dismisses it by making it invisible.
调用alert，正如 Matthew Abbott 所建议的那样，现在显示您刚刚创建的 div 并单击 x 通过使其不可见来消除它。
alert("hello from the dummy alert box.");
To implement, you'd need to have a test in the alert function to make sure you're not re-creating the div a million times and you'd need to mess around with the CSS to make it fit your colour scheme etc, but that's the rough shape of how to implement your own alert box.
要实现，您需要在警报功能中进行测试以确保您不会重新创建 div 一百万次，并且您需要弄乱 CSS 以使其适合您的配色方案等，但这是如何实现您自己的警报框的粗略形状。
Seems like overkill to me and I agree with Matthew that doing it with some kind of dialog or modal element created with a famous framework like jQuery or YUI would be better and strangely easier in the long run.
对我来说似乎有点矫枉过正，我同意 Matthew 的观点，从长远来看，使用诸如 jQuery 或 YUI 之类的著名框架创建的某种对话框或模式元素会更好，而且更容易。
回答by Broper
A quick run of my own, expanding on some of the code on this page:
我自己的快速运行，扩展了此页面上的一些代码：
function closeAlertBox() {
alertBox = document.getElementById("alertBox");
alertClose = document.getElementById("alertClose");
alertBox.parentNode.removeChild(alertBox);
alertClose.parentNode.removeChild(alertClose);
}
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;
document.body.appendChild(alertClose);
alertClose.onclick = closeAlertBox;
};#alertBox {
position: absolute;
top: 30%;
bottom: 60%;
left: 40%;
width: 20%;
height: 10%;
background-color: white;
border-radius: 10px;
padding: 10px;
z-index: 2;
text-align: center;
color: black;
}
#alertClose {
position: absolute;
right: 0;
top: 0;
background-color: rgba(0, 0, 0, .5);
width: 100%;
height: 100%;
}<html>
<body>
<h1>This is your page</h1>
<p>With some content<p>
<button onclick="alert('Send some message')">Click me</button>
</body>
</html>But there are also some good answers here:
但这里也有一些很好的答案：
回答by Matthew Abbott
The alertand promptfunctions call APIs provided by the browser, so you won't have any control over how they look.
在alert和prompt函数调用浏览器提供的API，所以你不会有超过他们如何看任何控制。
What you coulddo though is redefine those functions, and instead maybe use something like jQuery modal, e.g.:
你可以做的是重新定义这些函数，而不是使用像 jQuery modal 这样的东西，例如：
window.alert = function(message) {
// Launch jQuery modal here..
};
window.prompt = function(message) {
// Launch jQuery modal here..
};
回答by Eliu
You can't modify that; but you can use something like showModalDialog, it needs just an URI to load the hmtl/css form you want (if you can keep it in a separate page).
你不能修改它；但是你可以使用类似的东西showModalDialog，它只需要一个 URI 来加载你想要的 hmtl/css 表单（如果你可以将它保存在一个单独的页面中）。
