有没有办法在 JavaScript 中更改警报或提示的外观 ？诸如添加图像、更改字体颜色或大小以及任何会使它看起来不同的事情。
改变 JavaScript Alert() 或 Prompt() 的外观
IT技术
alert
prompt
javascript
2021-03-19 11:26:10
4个回答
扩展 Matthew Abbott 的想法，我突然想到您想要一个使用简单的旧 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;
};
调用alert，正如 Matthew Abbott 所建议的那样，现在显示您刚刚创建的 div 并单击 x 通过使其不可见来消除它。
alert("hello from the dummy alert box.");
要实现，您需要在警报功能中进行测试，以确保您不会重新创建 div 一百万次，并且您需要弄乱 CSS 以使其适合您的配色方案等，但这是如何实现您自己的警报框的粗略形状。
对我来说似乎有点矫枉过正，我同意 Matthew 的观点，从长远来看，使用诸如 jQuery 或 YUI 之类的著名框架创建的某种对话框或模式元素会更好，而且更容易。
在alert和prompt函数调用浏览器提供的API，所以你不会有超过他们如何看任何控制。
你可以做的是重新定义这些函数，而不是使用像 jQuery modal 这样的东西，例如：
window.alert = function(message) {
// Launch jQuery modal here..
};
window.prompt = function(message) {
// Launch jQuery modal here..
};
你不能修改它；但是你可以使用类似的东西showModalDialog，它只需要一个 URI 来加载你想要的 hmtl/css 表单（如果你可以将它保存在一个单独的页面中）。
我自己的快速运行，扩展了此页面上的一些代码：
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>但这里也有一些很好的答案：
其它你可能感兴趣的问题