JavaScript tiene tres tipos de cuadros emergentes: cuadro de alerta, cuadro de confirmación y cuadro de aviso.
A menudo se utiliza un cuadro de alerta si desea asegurarse de que la información llegue al usuario.
Cuando aparezca un cuadro de alerta, el usuario deberá hacer clic en "Aceptar" para continuar.
window.alert("sometext");
El método window.alert()
se puede escribir sin la ventana prefijo.
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Alert</h2>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</body>
</html>
A menudo se utiliza un cuadro de confirmación si desea que el usuario verifique o acepte algo.
Cuando aparece un cuadro de confirmación, el usuario deberá hacer clic en "Aceptar" o "Cancelar" para continuar.
Si el usuario hace clic en "Aceptar", el cuadro devuelve verdadero. Si el usuario hace clic en "Cancelar", el cuadro vuelve falso.
window.confirm("sometext");
El método window.confirm()
se puede escribir sin el prefijo de ventana.
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Confirm Box</h2>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt;
if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
A menudo se utiliza un cuadro de aviso si desea que el usuario ingrese un valor antes de ingresar a una página.
Cuando aparece un cuadro emergente, el usuario deberá hacer clic en "Aceptar" o "Cancelar". para continuar después de ingresar un valor de entrada.
Si el usuario hace clic en "Aceptar", el cuadro devuelve el valor de entrada. Si el usuario hace clic en "Cancelar", el cuadro devuelve nulo.
window.prompt("sometext","defaultText");
El método window.prompt()
se puede escribir sin el prefijo de ventana.
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Prompt</h2>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
let text;
let person = prompt("Please enter your name:", "Harry Potter");
if (person == null || person == "") {
text = "User cancelled the prompt.";
} else {
text = "Hello " + person + "! How are you today?";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Para mostrar saltos de línea dentro de un cuadro emergente, utilice una barra invertida seguida del carácter n.
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Line-breaks in a popup box.</p>
<button onclick="alert('Hello\nHow are you?')">Try it</button>
</body>
</html>