ES6 tiene tres tipos de cuadros de diálogo. Estos cuadros de diálogo se utilizan para varios propósitos, como se menciona a continuación:
- Genera una alerta de que la función de alerta se utiliza para realizar la tarea.
- Obtenga la confirmación de un evento o entrada: la función de confirmación se utiliza para realizar la tarea.
- Obtener una entrada del usuario: la función de solicitud se utiliza para realizar la tarea.
Cuadro de diálogo de alerta: un cuadro de alerta se utiliza para dar un mensaje de advertencia a los usuarios. El cuadro de alerta tiene solo un botón «OK» para seleccionar y continuar con la siguiente tarea. Por ejemplo, cuando algunos campos de entrada son obligatorios y el usuario no ha dado valor a ese campo de entrada, se puede mostrar una ventana emergente usando el cuadro de alerta.
- Sintaxis:
alert(message);
- Ejemplo: El siguiente código muestra el cuadro de diálogo de alerta:
html
<!DOCTYPE html>
<html>
<head>
<title>ES6 Dialog Boxes</title>
<script type="text/javascript">
function display() {
alert("I am an Alert dialog box");
}
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h4>ES6 Dialog Boxes with alert function</h4>
<p>Click the following button to proceed: </p>
<input type="button" value="Click Me" onclick="display();" />
</center>
</body>
</html>
- Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Cuadro de diálogo de confirmación: se utiliza un cuadro de diálogo de confirmación para tomar la opción de confirmación del usuario. Muestra un cuadro de diálogo con dos botones: Aceptar y Cancelar. Por ejemplo, si un usuario elimina algunos datos, la página puede confirmarlo mediante un cuadro de confirmación como si realmente esos datos fueran a eliminarse. Si el usuario hace clic en el botón Aceptar, el método devuelve el valor verdadero, mientras que si el usuario hace clic en el botón Cancelar, el método confirm() devuelve falso.
- Sintaxis:
confirm(message);
- Ejemplo: El siguiente código muestra el cuadro de diálogo de confirmación:
html
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript">
function display() {
var x = confirm ("I am a Confirm dialog box");
if( x == true ) {
document.write ("User wants to continue!");
}
else {
document.write ("User does not want to continue!");
}
}
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h4>ES6 Dialog Boxes with alert function</h4>
<p>Click the following button to proceed: </p>
<input type="button" value="Click Me" onclick="display();" />
</center>
</body>
</html>
- Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Cuadro de diálogo de aviso: El cuadro de diálogo de aviso se utiliza cuando se abre un cuadro de texto para obtener información del usuario. El usuario debe ingresar información en el cuadro de texto y luego hacer clic en Aceptar. Este cuadro de diálogo tiene dos botones: Aceptar y Cancelar. Si el usuario hace clic en el botón Aceptar, prompt() lee y devuelve el valor ingresado por el usuario. Si el usuario hace clic en el botón Cancelar, prompt() devuelve nulo.
- Sintaxis:
prompt(message, defstring);
- Ejemplo: el código siguiente muestra el cuadro de diálogo de solicitud. Aquí el mensaje es texto que se mostrará en el cuadro de texto y la string de definición es una string predeterminada para mostrar en el cuadro de texto.
html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function getValue() {
var retVal = prompt("Enter your Course : ", "Course name");
document.write("You have entered : " + retVal);
}
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h4>ES6 Dialog Boxes with prompt function</h4>
<p>Click the following button to proceed: </p>
<form>
<input type="button" value="Click Me" onclick="getValue();" />
</form>
</center>
</body>
</html>
- Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con los cuadros de diálogo de ES6 se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por rupanisweety y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA