Pop-ups en Javascript

Los pop-ups en javascript son más habituales de lo que podemos pensar, por ejemplo, cuando trabajamos con gestores de contenido o CMS. No sólo son las típicas ventanas de alerta (alert), también podemos utilizar cajas de confirmación (confirm) y cajas para recoger información (prompts), y os digo que pueden ser muy útiles en ocasiones.

Es cierto que no son muy elegantes, ni personificables, pero ahorran un mucho tiempo para según qué cosas y si se saben utilizar son una opción muy interesante.

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 \n de la siguiente forma:

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

alerts (ventanas de alerta)

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…

Ejemplo


// Su uso es tan sencillo como este: 
alert('Esto es un texto que aparece en una ventana');

// 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 = 17;
alert('Tengo ' + cuenta + '€, en la cartera');

// Por lo que su uso puede servirnos mucho.

prompt (cajas para recoger datos)

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

En el siguiente ejemplo vemos cómo al pulsar sobre el botón, se llama a la función que guarda en una variable lo que el usuario ha tecleado dentro de la caja del método prompt(), éste 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 más adelante en el código.

Ejemplo


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>Haz click en el boton para activar el prompt</p>
    <button onclick="miFuncion()">Pulsame!</button>
    <div id="demo"></div>

    <script>
    function miFuncion() {
        var persona = prompt("Cómo te llamas?", "escribe aquí tu nombre"); 
        if (persona !== null) {
            document.getElementById("demo").innerHTML =
            "Hola " + persona + "! ¿Cómo estas de ánimo?";
        }
    }
    </script>    
</body>
</html>

confirm (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 importantes.

Al hacer click en el botón se llama a la función estaSeguro la cual tiene dentro un if-else 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 ahorrarnos tiempo cuando estamos diseñando una aplicación.

Ejemplo


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>Pulsa el boton para mostrar el dialogo de confirmación.</p>
    <button onclick="estaSeguro()">Pulsame!</button>
    <div id="demo"></div>

    <script>
    function estaSeguro() {
        var x;
        if (confirm("Decide!") == true) {
            x = "Has pulsado OK!";
        } else {
            x = "Has pulsado cancel!";
        }
        document.getElementById("demo").innerHTML = x;
    }
    </script>
</body>
</html>

Pop-ups en Javascript

alerts (ventanas de alerta)

Ejemplo

prompt (cajas para recoger datos)

Ejemplo

confirm (cajas de confirmación)

Ejemplo

Licencias ...

Visitas ...