¡Buenas!

Todos los que alguna vez hemos hecho algo en JavaScript conocemos el típico mensajito por defecto del navegador que aparece utilizando la función alert(). A su vez, todos sabemos también lo horrible y cutre que puede (¿puede? ¡Ja!) llegar a ser el utilizar este mecanismo para mostrar mensajes emergentes al usuario.

 

Una de las formas más usadas para suplir este problemita es usando algún framework, como lo es jQuery u otros tantos, y que, de hecho, no están para nada mal (de hecho, son utilidades excelentes). Sin embargo y por ejemplo, puede ser un tanto raro incluir un framework completo sólo para añadir esta funcionalidad a tu sitio (y ya me dirás que para eso hay librerías ligeras, pero sigue sin ser lo mismo que hacerlo tú), y es que además, para muchos casos no te costará mucho hacerlo tú, realmente.

Así que bien, para inagurar el blog, en esta ocasión mostraré un pequeño método alternativo que nos puede ser de utilidad para realizar mensajes emergentes.

 

Vamos por la lógica

Este método es bastante sencillo: Casi todo lo haremos utilizando únicamente HTML y CSS, para darle el estilo al recuadro y todo eso, de modo en que nos quede personalizado y tal vez acorde al estilo de nuestro sitio.

 

Básicamente, se tratará de un DIV que, por defecto, va a permanecer oculto, y al momento de ejecutar la alarma, pues se mostrará con un texto determinado. ¿vale? Sencillito.

<!DOCTYPE html>
<html>
<head>
    <title>Sitio de prueba para emergentes</title>
    <meta charset="utf-8">
</head>
<body>
    Algo de contenido aquí,
    <br>
    Otro poco más de contenido, bla bla bla.
    <button id="clickeame">Clickéame para abrir el mensaje</button>

    <!--Lo importantexd-->
    <div id="messagebox-flex" style="display:none"> 
        <!--Usa un id y no un class porque en el sitio usaremos un solo contenedor
        para los mensajes emergentes, sólo que su contenido se cambiará dependiendo
        de lo que se quiera mostrar-->
        
        <div id="messagebox-container">
            <!--Aquí irá el contenido, el anterior será un flexbox con el que centraremos
            esta caja-->
        </div>
        <button id="messagebox-close">Cerrar</button> <!--Por si no se ha notado, es el botón de cerrar :v-->
    </div>
</body>
</html>

El HTML no es para nada algo del otro mundo. En realidad que es bastante sencillo. Vamos a darle un poco de estilo utilizando CSS:

#messagebox-flex {
    /*Aquí le ponemos display flexbox con compatibilidad para los navegadores
    viejitos*/
    display: -webkit-flex;
    display: -moz-flex;
    display: -o-flex;
    display: flex;
    
    /*Muy importante. Tenemos que centrar nuestro alert*/
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    
    /*Igual que el anterior, sólo que verticalmente (ah sí, que el anterior
    era horizonal :v xd)*/
    -webkit-align-items: center;
    -moz-align-items: center;
    -o-align-items: center;
    align-items: center;
    
    /*Esto para que los elementos hijos se ubiquen verticalmente*/
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    
    /*Vamos a fijarlo en la pantalla para que quede de tamaño completo*/
    position: fixed;
    top: 0;
    left:0;
    width:100%;
    height:100%;
    
    overflow: hidden; /*Por si algo se sale del contenedor*/
    
    /*¡Colorcito!*/
    background-color: rgba(0, 0, 0, 0.7); /*Un negro semi-transparente*/
                                          /*espera... ¿ké? xD*/
}

/*Vamos con el contenedor*/
#messagebox-container {
    display:inline-block; /*Para que tome sólo el tamaño justo*/
    background-color:#CCC; /*Fondo gris*/
    padding:0.5em;
}

/*El botón se puede joder 🙂 */

Vamos ahora con lo importante: JavaScript.

 

Lo que haremos básicamente será programar un objeto que nos permita crearle una instancia (o sea, de sí mismo) que muestre el DIV con el texto que le solicitemos, y además, nos permita definir una función a modo de evento que se ejecute cuando el mensaje se cierra.

 

El resto de código lo dejo en JSFiddle, que ni sé para qué lo puse directamente en el post. xD.

 

El resultado sería éste:

El apartado visual está súper cutre, aunque supongo que en un tiempo subiré un ejemplo completo al sitio o algo así. De hecho tengo pensada una sección en plan CDN para archivos de todo este estilo; quedaría interesante.

 

EDIT: Bien, aquí dejo un ejemplo completo de estos mensajes personalizados, al igual que el código fuente en Github.

 

Bueno, ya eso sería todo. Espero que la guía les haya servido, y cualquier opinión en general pueden expresarla en los comentarios 🙂 . Esto es un poco para mostrar que se pueden hacer cosas guay sin necesidad de frameworks y un montón de cosas prefabricadas, aunque (ni por asomo) estoy diciendo que sea siempre lo mejor.

 

Y ahora sí, hasta la próxima.