更改JavaScript Alert（）或Prompt（）的外观 [英] Changing the way a JavaScript Alert() or Prompt() looks

问题描述

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

Is there any way to change the looks of an alert or prompt in JavaScript? Things like adding an image, changing the font color or size, and whatever will make it look different.

推荐答案

扩展Matthew Abbott的想法，让我感到震惊的是你想要一个使用普通旧Javascript而无需求助于任何框架的答案。这是一个快速而脏的页面，它使用一个简单的关闭按钮发出一个div，并在中心显示消息：

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:

alertBox的粗略CSS和alertClose按钮

Rough CSS for the alertBox and the alertClose button

#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上的click事件。

Then some javascript to override the built-in alert function and provide a closing function to handle the click event on 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建议的那样，拨打提醒，现在显示你刚刚创建的div，然后单击x使其不可见。

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("hello from the dummy alert box.");

要实施，您需要在警报功能中进行测试，以确保您拥有没有重新创建div一百万次，你需要搞乱CSS以使它适合你的配色方案等，但这是如何实现你自己的警报框的粗略形状。

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.

对我而言似乎有点过分了，我同意Matthew的说法，用jQuery或YUI等着名框架创建的某种对话框或模态元素来做这件事会更好，更奇怪从长远来看更容易。

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.

这篇关于更改JavaScript Alert（）或Prompt（）的外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！