Cambiar la forma de una alerta de JavaScript() o Prompt() se ve

Question

¿Hay alguna forma de cambiar el aspecto de un alerta o pronta en JavaScript? Cosas como agregar una imagen, cambiar el color o el tamaño de la fuente, y lo que sea que lo haga parecer diferente.

Answer 1

Las funciones alert y prompt llaman a las API proporcionadas por el navegador, por lo que no tendrá ningún control sobre su apariencia.

Lo que podría no es sin embargo vuelve a definir esas funciones, y en su lugar tal vez usar algo como jQuery modal, por ejemplo .:

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

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

Answer 2

no puede modificar eso; pero puede usar algo como showModalDialog, solo necesita un URI para cargar el formulario hmtl/css que desea (si puede guardarlo en una página separada).

Answer 3

Ampliando la idea de Matthew Abbott, me sorprendió que deseara una respuesta que utiliza un Javascript antiguo sin recurrir a ningún framework. Aquí hay una página rápida y sucia que emite un div con un simple botón Cerrar y el mensaje presentado en el centro:

CSS áspero para el Alertbox y el botón 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; 
} 

Entonces algunos javascript para activar manualmente el -en la función de alerta y proporciona una función de cierre para manejar el evento click en 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, como se sugiere Mateo Abbott, ahora muestra el div que acaba de crear y haga clic en la x lo descarta por lo que es invisible.

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

de implementar, que había necesidad de tener una prueba de la función de alerta para asegurarse de que usted no está recreando el div un millón de veces y que había necesidad de perder el tiempo con el CSS para hacer se ajusta a su esquema de color, etc., pero esa es la forma aproximada de cómo implementar su propio cuadro de alerta.

Me parece exagerado y estoy de acuerdo con Matthew en que hacerlo con algún tipo de diálogo o elemento modal creado con un framework famoso como jQuery o YUI sería mejor y extrañamente más fácil a largo plazo.

Answer 4

Un pequeño resumen de mi propia, ampliando una parte del código en esta página:

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 { 
 
\t position: absolute; 
 
\t top: 30%; 
 
\t bottom: 60%; 
 
\t left: 40%; 
 
\t width: 20%; 
 
\t height: 10%; 
 
\t background-color: white; 
 
\t border-radius: 10px; 
 
\t padding: 10px; 
 
\t z-index: 2; 
 

 
\t text-align: center; 
 
\t color: black; 
 
} 
 

 
#alertClose { 
 
\t position: absolute; 
 
\t right: 0; 
 
\t top: 0; 
 
\t background-color: rgba(0, 0, 0, .5); 
 
\t width: 100%; 
 
\t 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>

Pero también hay algunas buenas respuestas aquí:

• how to change the style of alert box