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

问题描述

有什么方法可以改变 JavaScript 中 alert 或 prompt 的外观?诸如添加图像、更改字体颜色或大小以及任何会使它看起来不同的事情.

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 和 alertClose 按钮​​的粗略 CSS

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来覆盖内置的alert函数并提供一个关闭函数来处理alertClose上的点击事件.

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 的建议，调用 alert 现在会显示您刚刚创建的 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屋！