Question

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

Answer 1

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

alertBox的粗略CSS和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;
}

然后一些javascript覆盖内置警报功能并提供一个关闭函数来处理alertClose上的click事件。

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和prompt函数调用浏览器提供的API，因此您无法控制它们的外观。

你可以做的事情是重新定义这些功能，而是使用类似jQuery模式的东西，例如：

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

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

Answer 3

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

Answer 4

我自己的快速浏览，扩展了此页面上的一些代码：

＆＃13;

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

＆＃13;

#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%;
}

＆＃13;

<html>
<body>
<h1>This is your page</h1>
<p>With some content<p>
<button onclick="alert('Send some message')">Click me</button>
</body>
</html>

＆＃13;

但这里也有一些好的答案：

how to change the style of alert box

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

4 个答案: