Los cuadros de diálogo en JavaScript

JavaScript cuadros de diálogo : Aquí, vamos a aprender acerca de los diferentes tipos de cuadros de diálogo en HTML utilizando JavaScript .

JavaScript cuadros de diálogo

Los cuadros de diálogo son una gran manera de proporcionar información al usuario durante la entrega de un formulario. En JavaScript, hay tres tipos de cuadros de diálogo,

  1. Alerta
  2. Confirmar
  3. Prompt

1) Alerta

Un cuadro de alerta actúa como una ventana de advertencia de class las usuario para indicar que algo se ha introducido de forma incorrecta. for ejemplo, si tiene que introducir su correo electrónico y que no coinciden con el patrón de correo electrónico correcta como perdido una ‘@’ o algo así. Ellos dan un botón Aceptar de proceder y, lógicamente, el usuario es redirigido a la misma forma para que puedan entrar en esos campos de nuevo.

verifica 2) Confirmar

esta casilla si el campo o campos introducido por el usuario es aceptado o no. Cuando un cuadro Confirmar se abre, el usuario tendrá dos opciones ‘Ok’ y ‘Cancelar’ de seguir avanzando. Los eventos de clic en estos botones están asociados con una propiedad del método window.confirm () que devuelve true cuando el usuario hace clic ‘Ok’ y falso en caso contrario. Imagínese que usted está haciendo una transacción en línea a través de la banca por Internet y que ha introducido algunos datos bancarios de credenciales. Confirmar cajas son una forma de permitir que los conocimientos de usuario que han llenado un formulario con datos importantes y pueden volver a comprobar si quieren.

3) Preguntar

cuadros Indicador son muy similares a cajas confirman con la única diferencia de que tienen un valor de entrada que el usuario se le puede pedir a entrar. For ejemplo, cajas rápidas puede ser útil cuando se está llenando un formulario en el que sólo al entrar en algunos detalles básicos se le pide For datos más confidenciales. Este último se puede conectar a la entrada del campo de la indicación. a continuación, se le da al usuario ‘Ok’ y ‘Cancelar’ botones que funcionan de la misma manera como lo hicieron for caja un Confirmar .

Para demostrarlo, vamos a crear un simple inicio de sesión de forma que utiliza todos los tres cuadros de diálogo.

Ejemplo: (index.html)

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dialog Boxes in Forms</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<style>
body {
background: skyblue;
}
form {
position: relative;
top: 60px;
left: 40px;
padding: 40px;
border: 2px solid slategray;
background: slategray;
}
button {
position: relative;
left: 350px;
color: skyblue;
}
</style>
<body>
<div class="container">
<form>
<h3 class="white-text">Welcome to gingo! Let's sign you in :)</h2>
<p class="white-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, eligendi corporis quam, similique ipsum expedita,
cum impedit culpa autem ea velit. Hic voluptas libero quasi neque, expedita saepe ex voluptate!</p>
<label for="name" class="white-text">
<input type="text" id="name">Enter your name
</label>
<label for="email" class="white-text">
<input type="text" id="email">Enter your email
</label>
<br><br><br>
<button class="btn submit">Proceed</button>
</form>
</div>
</body>
<script>
</script>
</html>

salida

Dialog Boxes in JavaScript - 4

Ahora que tenemos una configuración básica forma, vamos a pensar en cómo vamos a utilizar los tres cuadros de diálogo para proporcionar alguna información. Podemos implementar alerta para comprobar si el usuario ha rellenado el formulario para que no se someten una forma vacía por lo que vamos a hacer esto en primer lugar,

<script>
document.querySelector('.submit').addEventListener('click', e => {
e.preventDefault();
const name = document.querySelector('#name').value;
const email = document.querySelector('#email').value;
if (name == '' || email == '')
alert('Please fill all the fields!')
})
</script>

salida

Dialog Boxes in JavaScript - 5

Si el usuario entró en algunos valor, vamos a dar un cuadro de mensaje a la for usuario que introduce un código de seguridad especial y si lo hizo entrar en ella, vamos a abrir una caja de diálogo de confirmación,

<script>
document.querySelector('.submit').addEventListener('click', e => {
e.preventDefault();
const name = document.querySelector('#name').value;
const email = document.querySelector('#email').value;
if (name == '' || email == '')
alert('Please fill all the fields!')
else {
prompt('Enter your special security')
if (prompt() != null)
confirm('Are you sure you want to proceed?')
}
})
</script>

salida

Dialog Boxes in JavaScript - 6
Dialog Boxes in JavaScript - 7

lo tanto a través de estos cuadros de diálogo, puede proporcionar información al usuario que puede mejorar los estilos de sus formas en su sitio web.


Deja un comentario

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