ES6 | Cuadros de diálogo

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: 

  1. Genera una alerta de que la función de alerta se utiliza para realizar la tarea.
  2. Obtenga la confirmación de un evento o entrada: la función de confirmación se utiliza para realizar la tarea.
  3. 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *