Geek Answers Handbook

Changing the way JavaScript Alert () or Prompt () is viewed

Is there a way to change the look of the alert hint or in javascript? Things like adding an image, changing the color or font size and everything that looks different.

+7
source share
4 answers

Expanding on the idea of ​​Matthew Abbott, it seemed to me that you need an answer that uses simple old Javascript without resorting to any frameworks. Here is a quick and dirty page that emits a div using a simple close button and a message presented in the center:

Rough CSS for the alertBox button and 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 overrides the built-in alert function and provides a close function to handle the click on alertClose event.

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

The alert call, as Matthew Abbott suggested, now displays the newly created div and clicking x rejects it, making it invisible.

 alert("hello from the dummy alert box.");

To implement, you will need to take a test in the alert function to make sure you are not re-creating the div a million times, and you will need to work around with CSS to match your outline color, etc., but this is a crude form of How to implement your own alert field.

It seems to me that this is too much, and I agree with Matthew that doing this using some kind of dialogue or modal element created using a well-known structure such as jQuery or YUI would be better and strangely simpler in the long run.

+4
source

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

What you could do is override these functions, and instead use something like jQuery modal, for example:

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

You cannot change this; but you can use something like showModalDialog , it only needs a URI to load the desired hmtl / css form (if you can save it on a separate page).

0
source

Quick launch of my own, expanding on some 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 good answers here:

0
source

More articles:


All Articles