Pop ups en Javascript

Posted by On junio 04, 2016 6 Comments

Vamos a hablar de los pop ups en javascript y sus posibilidades, de hecho suele ser bastante normal que las veamos, como por ejemplo cuando queremos eliminar una imagen en WordPress, ya que no todos los Pop ups en javascript son los típicos alerts. También podemos utilizar cajas de confirmación y prompts, y podéis creerme cuando os digo que pueden ser muy útiles.

Es cierto no es que sean muy elegantes, ni personificables, pero ahorran un montón de trabajo para según qué cosas y si se saben utilizar son una opción muy adecuada.

alerts

Es el pop up más común, de hecho cuando conozco muchos programadores que los utilizan para hacer pruebas de por donde va el flujo de la aplicación, mostrando mensajes para los usuarios de forma sencilla…

Su uso es tan sencillo como este:

alert('Aquí viene el texto');

Naturalmente se puede poner una variable de la siguiente forma:

var hola = 'Hola mundo';
alert(hola);

Incluso se pueden encadenar variables con cadenas:

var cuenta = 8;
alert('su cuenta asciende a ' + cuenta + '€');

Por lo que su uso puede servirnos mucho.

Cajas de confirmación

Las cajas de confirmación pueden ser muy útiles para asegurarnos de que el usuario no cometa un error, introduciendo una pregunta de seguridad y evitando de ese modo por ejemplo que elimine datos sensibles.

Aunque está muy bien usar las cajas de confirmación, siempre habrá quien te diga que no se dio cuenta al pulsar el confirmar…

Para su uso hay que usar tan solo un código similar al siguiente:

<!DOCTYPE html>
<html>
<body>
Pulsa el boton para mostrar el dialogo de confirmación. <button onclick="confirmar()">Pulsa!</button>

<div id="demo"></div>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Afunction%20confirmar()%20%7B%0A%20%20%20%20var%20x%3B%0A%20%20%20%20if%20(confirm(%22Presiona%20un%20boton!%22)%20%3D%3D%20true)%20%7B%0A%20%20%20%20%20%20%20%20x%20%3D%20%22Has%20pulsado%20OK!%22%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20x%20%3D%20%22Has%20pulsado%20cancel!%22%3B%0A%20%20%20%20%7D%0A%20%20%20%20document.getElementById(%22demo%22).innerHTML%20%3D%20x%3B%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</body>
</html>

Como vemos al hacer click en el botón se llama a la función confirmar la cual tiene dentro un ifelse en cuya condición tenemos el método confirm() que recibe como argumento la pregunta / texto que queremos enviar al pop up, y se iguala a true.

El método confirm() nos va a generar el pop pup con dos opciones, aceptar y cancelar, y dependiendo de la que pulsamos el programa hará una cosa u otra.

Algo realmente sencillo y efectivo que puede sacarnos de más de un problema cuando estamos diseñando una aplicación.



Prompts

Los prompts nos pueden servir para comunicarnos con el usuario de forma sencilla y obtener información de él fácilmente.

En el siguiente código vemo la forma que tiene de funcionar:

<!DOCTYPE html>
<html>
<body>
Haz click en el boton para activar el prompt
<button onclick="miFuncion()">Pulsa</button>

<div id="demo"></div>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Afunction%20miFuncion()%20%7B%0A%20%20%20%20var%20persona%20%3D%20prompt(%22C%C3%B3mo%20te%20llamas%3F%22%2C%20%22Harry%20Potter%22)%3B%20%0A%20%20%20%20if%20(persona%20!%3D%20null)%20%7B%0A%20%20%20%20%20%20%20%20document.getElementById(%22demo%22).innerHTML%20%3D%0A%20%20%20%20%20%20%20%20%22Hola%20%22%20%2B%20persona%20%2B%20%22!%20%C2%BFC%C3%B3mo%20estas%20hoy%3F%22%3B%0A%20%20%20%20%7D%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</body>
</html>

Aquí vemos cómo al pulsar sobre el botón, se llama a la función que guarda en una variable la método prompt() que recibe dos argumentos:

  • El texto que queremos que aparezca en el Pop up
  • El texto que queremos que aparezca en el «input»

Al rellenar la caja del prompt estamos guardando en la variable el valor introducido y de ese modo podemos trabajar con él.

Rompiendo las líneas

Los pop ups en javascript no reconocen el código HTML por lo que no podemos trabajar con sus etiquetas, pero existe la forma de romper la línea por si queremos dar algo de formato al texto. Para ello debemos de utilizar el carácter escape de la siguiente forma:

alert("Hola\n¿cómo estás?");

Con esto hemos visto todo lo referente a los pop ups en javascript y espero que te haya servido. Si te ha gustado, tienes alguna duda… no dudes en dejar un comentario, compartir la entrada…