Changing the way a JavaScript Alert() or Prompt() looks_问答_开发者

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.

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.

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

You can't modify that; but you can use something like showModalDialog, it needs just an URI to load the hmtl/css form you want (if you can keep it in a separate page).

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

Changing the way a JavaScript Alert() or Prompt() looks

精彩评论

关注公众号

热门标签

图文推荐

Changing the way a JavaScript Alert() or Prompt() looks

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：