当前位置：文江博客话题详情

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

发布于 2024-11-29 15:12:16 字数 119 浏览 2 评论 0原文

有没有办法改变 JavaScript 中警报或提示的外观？例如添加图像、更改字体颜色或大小以及任何使其看起来不同的操作。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只有一腔孤勇 2024-12-06 15:12:16

扩展 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.");

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

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

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:

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

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

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.");

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.

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.

回复收藏 0 原文

放低过去 2024-12-06 15:12:16

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

不过，您可以做的是重新定义这些函数，并且可以使用 jQuery 模态之类的东西，例如：

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

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

The alert and prompt functions call APIs provided by the browser, so you won't have any control over how they look.

What you could do though is redefine those functions, and instead maybe use something like jQuery modal, e.g.:

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

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

回复收藏 0 原文

寄与心 2024-12-06 15:12:16

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

回复收藏 0 原文

っ〆星空下的拥抱 2024-12-06 15:12:16

我自己的快速运行，扩展了本页上的一些代码：

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>

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

如何更改警报的样式框

A quick run of my own, expanding on some of the code on this page:

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>

But there are also some good answers here:

how to change the style of alert box

回复收藏 0 原文

~没有更多了~

关于作者

舂唻埖巳落

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

Gabu-gabumon

qq_CgiN62

荔枝明

赏烟花じ飞满天

独守阴晴ぅ圆缺

¤→小豸慧

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

Gabu-gabumon

qq_CgiN62

荔枝明

赏烟花じ飞满天

独守阴晴ぅ圆缺

¤→小豸慧

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。