更改JavaScript Alert()或Prompt()的外观

Question

有没有办法在JavaScript中更改警报或提示的外观 ？添加图像,更改字体颜色或大小等内容会让它看起来与众不同.

Answer 1

扩展 Matthew Abbott 的想法，令我震惊的是，您想要一个使用普通旧 Javascript 而不依赖任何框架的答案。这是一个快速而肮脏的页面，它发出一个带有简单关闭按钮的 div 和在中心显示的消息：

警报框和警报关闭按钮的粗略 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 Abbott 建议的那样，调用alert，现在会显示您刚刚创建的 div，然后单击 x 通过使其不可见来将其关闭。

alert("hello from the dummy alert box.");

要实现，您需要在警报功能中进行测试，以确保您不会重新创建 div 一百万次，并且您需要修改 CSS 以使其适合您的配色方案等，但这是如何实现您自己的警报框的大致形式。

对我来说这似乎有点矫枉过正，我同意 Matthew 的观点，从长远来看，使用 jQuery 或 YUI 等著名框架创建的某种对话框或模式元素会更好，而且更容易。

Answer 2

和函数调用浏览器提供alert的promptAPI，因此您无法控制它们的外观。

你可以做的是重新定义这些函数，并且可以使用类似 jQuery 模式的东西，例如：

window.alert = function(message) {
    // Launch jQuery modal here..
};

window.prompt = function(message) {
    // Launch jQuery modal here..
};