En Javascript, los cuadros emergentes se utilizan para mostrar el mensaje o la notificación al usuario. Hay tres tipos de cuadros emergentes en JavaScript , a saber , cuadro de alerta, cuadro de confirmación y cuadro de aviso .
Alert Box: Se utiliza cuando se necesita producir un mensaje de advertencia. Cuando se muestra el cuadro de alerta al usuario, el usuario debe presionar Aceptar y continuar.
Sintaxis:
alert("your Alert here")
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Pop-up Box type | Alert Box</title>
<style>
h1{
color:green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Alert Box</h3>
<button onclick="geekAlert()">
Click here for alert box
</button>
<!-- Alert box function -->
<script>
function geekAlert() {
alert("An Online Computer Science"
+ "Portal for Geeks");
}
</script>
</center>
</body>
</html>
Salida:
Antes de pulsar el botón:
Después de presionar el botón:
Cuadro de aviso: es un tipo de cuadro emergente que se utiliza para obtener la entrada del usuario para su uso posterior. Después de ingresar los detalles requeridos, el usuario debe hacer clic en Aceptar para continuar con la siguiente etapa; de lo contrario, al presionar el botón Cancelar, el usuario devuelve el valor nulo.
Sintaxis:
prompt("your Prompt here")
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Pop-up Box type | Prompt Box
</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Prompt Box</h3>
<input type="button" onclick="geekPrompt();"
value="Click here for Prompt box"/>
<!-- Prompt box function -->
<script>
function geekPrompt() {
var x = prompt("Enter your mail here : ");
document.write("Your ID : " + x);
}
</script>
</center>
</body>
</html>
Salida:
Antes de pulsar el botón:
Después de presionar el botón:
Cuadro de confirmación: es un tipo de cuadro emergente que se utiliza para obtener autorización o permiso del usuario. El usuario debe presionar el botón Aceptar o Cancelar para continuar.
Sintaxis:
confirm("your query here")
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Pop-up Box type | Confirm Box
</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Confirm Box</h3>
<button onclick="geekConfirm()">
Click here for Confirm box
</button>
<p id="geek"></p>
<!-- Confirm box function -->
<script>
function geekConfirm() {
var x;
if (confirm("Press a button!") == true) {
x = "OK pressed!";
} else {
x = "Cancel!";
}
document.getElementById("geek").innerHTML = x;
}
</script>
</center>
</body>
</html>
Salida:
Antes de pulsar el botón:
Después de presionar el botón:
HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .