更改 JavaScript Alert() 或 Prompt() 的外观
[英]Changing the way a JavaScript Alert() or Prompt() looks
问题描述
Is there any way to change the looks of an alert or prompt in JavaScript?
有什么方法可以改变 JavaScript 中警报或提示的外观？ Things like adding an image, changing the font color or size, and whatever will make it look different.诸如添加图像、更改字体颜色或大小以及任何使它看起来不同的事情。
4 个解决方案
解决方案1
4 2012-06-09 07:36:56
Expanding on Matthew Abbott's idea, it struck me that you want an answer that uses plain old Javascript without recourse to any frameworks.扩展 Matthew Abbott 的想法，令我震惊的是，您想要一个使用普通旧 Javascript 而不求助于任何框架的答案。 Here's a quick and dirty page that emits a div with a simple close button and the message presented in the centre:这是一个快速而肮脏的页面，它发出一个带有简单关闭按钮的 div 和中心显示的消息：
Rough CSS for the alertBox and the alertClose button粗略的 CSS 用于 alertBox 和 alertClose 按钮
#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 覆盖内置警报 function 并提供关闭 function 来处理警报关闭上的点击事件。
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.要实施，您需要在警报 function 中进行测试，以确保您没有重新创建 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 等著名框架创建的某种对话框或模态元素会更好，而且更容易。
解决方案2
1 2011-08-14 12:25:48
The alert and prompt functions call APIs provided by the browser, so you won't have any control over how they look. alert和prompt函数调用浏览器提供的 API，因此您无法控制它们的外观。
What you could do though is redefine those functions, and instead maybe use something like jQuery modal, eg:你可以做的是重新定义这些功能，而不是使用类似 jQuery 模态的东西，例如：
window.alert = function(message) {
// Launch jQuery modal here..
};
window.prompt = function(message) {
// Launch jQuery modal here..
};
解决方案3
0 2018-02-06 20:17:10
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:但这里也有一些很好的答案：
解决方案4
0 2011-08-14 13:21:19
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 表单（如果你可以将它保存在一个单独的页面中）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.