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