改变JavaScript Alert（）或Prompt（）的外观

有什么方法可以在JavaScript中改变警告或提示的外观吗？ 诸如添加图像，更改字体颜色或大小以及任何会使其看起来不同的内容。

---

扩展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;
};

正如Matthew Abbott所建议的，调用alert现在会显示您刚刚创建的div，并单击x使其不可见。

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

为了实现，你需要在alert函数中进行测试，以确保你不会重新创建div一百万次，并且需要对CSS进行调整以使其适合您的颜色方案等，但这是如何实现自己的警报框的粗糙形状。

似乎对我来说过分夸张，我同意马修的观点，即使用像jQuery或YUI这样的着名框架创建的某种对话框或模式元素，从长远来看，它会更好，更容易。

---

alert和prompt功能调用浏览器提供的API，因此您无法控制它们的外观。

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

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

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

---

你不能修改它; 但你可以使用诸如showModalDialog东西，它只需要一个URI来加载你想要的hmtl / css表单（如果你可以把它保存在一个单独的页面中）。

链接地址: http://www.djcxy.com/p/54397.html

上一篇: Changing the way a JavaScript Alert() or Prompt() looks

下一篇: MVC3: What is the best way to get the view path from an HtmlHelper object?