Cuadros emergentes de JavaScript


Tabla de contenido

    Mostrar tabla de contenidos


JavaScript tiene tres tipos de cuadros emergentes: cuadro de alerta, cuadro de confirmación y cuadro de aviso.


Cuadro de alerta

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.

Sintaxis

window.alert("sometext");

El método window.alert() se puede escribir sin la ventana prefijo.

Ejemplo

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>

Confirmar cuadro

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.

Sintaxis

window.confirm("sometext");

El método window.confirm() se puede escribir sin el prefijo de ventana.

Ejemplo

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>


Cuadro de aviso

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.

Sintaxis

window.prompt("sometext","defaultText");

El método window.prompt() se puede escribir sin el prefijo de ventana.

Ejemplo

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>

Saltos de línea

Para mostrar saltos de línea dentro de un cuadro emergente, utilice una barra invertida seguida del carácter n.

Ejemplo

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>