Hola, hoy quería explicar, diferentes formas de incluir, en una página, las típicas ventanas modales, que se abren, para mostrar, por ejemplo, las cookies, y que pueden servir, para presentar cualquier otro contenido (formularios, imágenes, etc), que por defecto, tengámos oculto. Darle al usuario, la opción de visualizarlo, cuando interactue, con algún enlace ó botón, de tu página. También veremos, otra forma original, de mostrar contenido, mediante ventanas emergentes ó tooltips, los típicos bocadillos de texto, que emérgen, por encima ó debajo, de alguna palabra, de tu texto, para ampliar alguna explicación ó dar información suplementária y todo esto básicamente, con mi querido CSS3.
Podemos hacerlo usándo unicámente CSS, empleándo, el pseudo-selector :target de los enlaces, y también podemos implementar, este tipo de ventanas, con un poquito de javascript.
No es necesario usar javascript, para crear, ventanas modales, de información ó contenido extra, en nuestras páginas, podemos aprovechar, el pseudo-selector :target, de los enlaces. Como ya sabreís, el :target, es el elemento de destino del enlace, entonces si a nuestro enlace, le ponemos href="#div", al clicarlo, nos conduce al elemento, cuyo id="div", (usádo habitualmente para dirigir al usuario, a distintas secciones de la página), por tanto, consiste simplemente, en crearle, unos estilos, a ese contenedor, que lo mantengá, oculto y se muestre, al clicar en el enlace.
Vamos a verlo mejor, con un par de ejemplos, similares, pero con contenido distinto, para mostraros, distintas utilidades, que podriamos darles a estas ventanas modales. Por ejemplo, podríamos incluir, en la ventana modal, todo tipo de formularios, que por temas de espacio ó maquetación, de la página, no nos interesa, que esten visibles, por ejemplo, quieres mostrar un formulario de contacto oculto, colocarías un enlace, como el que sigue CONTACTO ó SUGERENCIAS, que tendría el siguiente código html y css:
No definó, ni el código, ni el estilo del formulario, porque aquí, no es lo relevante, lo interesante es el estilo del <div id="popup" class="overlay"> que como observarás, por su posición y sus coordenadas, cubre toda la pantalla, y por su visibilidad y opacidad, esta oculto, se hace visible, en el :target, del enlace que le apunta. Comentar, también que el botón de cerrar, esta ventana, es realmente, otro enlace, que por el mismo metodo, pero a la inversa, conduce de nuevo a la página, gracias a su href="#". Luego os muestro como hacerlo con javascript, que tiene alguna ventaja.
Estas ventanas, pueden tener multiples usos, en las páginas, no se, se me ocurre, por ejemplo, en una página comercial de venta online, en la que se esta describiendo, un determinado producto, y decides incluir, un enlace para exponer, otros productos en oferta, incluyes un enlace, como el siguiente, OFERTAS, (pinchalo para ver el contenido), y es una manera original, de exponer otros productos.
No explico, en detalle el código, de este segundo ejemplo, porque, es similar al primero, solo varia en el contenido, uno tiene un formulario y este, una galeria de imágenes, y así puedes incluir, en este tipo de ventanas modales, cualquier contenido, que se te ocurra ó necesites en tu web.
Como ya os he anticipado antes, también podemos implementar, ventanas modales, que se abrán, al clicar en un botón, que podría ser como el siguiente:
El cual, manejaremos, con un poco, de javascript, que tendría, como ventaja principal, facilitarle a los usuarios, el cierre, de la ventana modal, clicando, de nuevo en cualquier lugar, de la página, os muestro el sencillo código que tiene:
El html, es similar, a los anteriores ejemplos, lo especifico, para que lo asocieis, más fácilmente, con el javascript. El css, también es similar, consiste básicamente, en una ventana, que mantenemos oculta, hasta que la activamos, en este caso, al clicar en el botón, la única diferencia, es que creó una nueva clase, a esa ventana, para manejarla con el javascript, como explicó a continuación.
Entonces, como observareís, en el javascript, se emplea el metodo toggle, que básicamente, es intercambiar, entre los distintos estilos ó clases, que tiene un elemento, y se creá una función, para que el :target este en el window de la página, lo que permite cerrar la ventana modal, más facilmente.
Bueno, espero haberos explicado, con claridad, el funcionámiento de estas ventanas y sus multiples usos. A continuación, quiero explicaros, otra forma, de mostrar, ciertos contenidos, de una manera, muy estetica, y que seguro, que habreís visto, en muchas páginas, me refiero a los llamados tooltips ó bocadillos de texto, que aparecen, al hacer :hover, en algún elemento, de la página.
Texto o contenido del popup. Aquí podrias poner el texto de los términos o condiciones de uso de tu web
A mi, de siempre, me habian llamado, la atención, estas pequeñas, ventanas emergentes, que aparecían de la nada, por encima ó por debajo, de algunas palabras, para dar una descripción ó ampliar, la explicación, sobre, el tema que se este tratando. Pues bien, estas ventanas emergentes, también llamadas tooltips, son sencillas, de construir, solo con CSS, usándo la pseudo-clase :hover y los pseudo-elementos ::before y ::after, podemos darle, el estilo, a un atributo data-, personalizado, que podemos incluirle, a cualquier etiqueta del
html, veamoslo con más detalle:
Desde html5, podemos asignar, a las etiquetas, todos los atributos, data-, personalizados, que queramos, son zonas de almacenamiento de datos, que los usuarios, no pueden ver, sino es exáminando el código fuente, estos atributos, nos vienen muy bien, para construir los tooltip.
Los atributos data-, podemos manejarlos, con javascript, por el metodo getAttribute ó por dataset, pero este es otro tema, aquí quiero tratar, como manejar, este atributo, con css, para implementar, estas ventanas emergentes en una página web
Entonces como usámos este atributo, de las etiquetas html, con el css, para lograr nuestro proposito de crear, estas ventanas emergentes, con información relevante, pues como os he anticipado, haciendo uso, de los pseudo-elementos, ::before y ::after, que sabreís, que a su vez tienen un content= "";, de la siguiente manera:
Ahora nos faltaría, darles el estilo, a los pseudo-elementos, ::before y ::after, junto con :hover.
Podemos comenzar, por darle el estilo general, al pseudo-elemento ::before, que tendría el siguiente código css:
Vereís que el contenido (content: "";), de ::before, es el valor del atributo data-span, que no aparecera, por el valor de display: none; y que tiene, position: absolute; para que cuando aparezca, flote encima de su <span>, el resto de estilos, que queraís, que tengán, vuestros bocadillos de texto, se los podeís asignar a vuestro gusto.
Ya solo faltaría, hacerlo aparecer, cuando el usuario, haga :hover, sobre el <span>, y lo conseguimos así:
Contruiremos el triangulito, de los globos, con el pseudo-elemento ::after, que tiene el mismo estilo general, que ::before, y lo conseguimos jugando con un borde transparente.
El html, es un <p></p>, que encierra varios <span></span>, cada uno con su atributo data-span="....", el objetivo, es que aparezca, en pantalla, este data-span, cuando el usuario, haga :hover, (pose el mouse), en el <span>. Os muestro todo mi CSS, particular, (experimentad vosotros, con el vuestro) y más abajo el resultado.
La era de la informática, comenzó, en el siglo XX, fue adquiriendo mayor, importancia, según se iban incorporándo avances tecnológicos, y todavía, mayor trascendencia, con la aparición de internet, y sigue, con un desarrollo vertiginoso.
Podemos, mejorar el resultado, habreís visto, que la aparición, de los globos de texto, es muy brusca, esto es porque la propiedad display, no es animable, entonces, podemos cambiar esta propiedad, por otras, que si lo sean, como opacity ó visibility y mediante las propiedades transition ó animation, crearles un efecto de aparición y desaparición, gradual, que queda mejor.
La era de la informática, comenzó, en el siglo XX, fue adquiriendo mayor, importancia, según se iban incorporándo avances tecnológicos, y todavía, mayor trascendencia, con la aparición de internet, y sigue, con un desarrollo vertiginoso.
Lo dicho, he cambiado, de display: none;, a display: block; en ::before y ::after y he añadido, las propiedades, opacity: 0; y pointer-event: none;, para que los tooltips, no seán visibles y para que no tengán eventos del cursor, y luego en el :hover, le añadimos la opacity: 1; y una transition: 0.6s linear;, que también añado en ::before y ::after, para, hacerle ese pequeño efecto, de aparición y desaparición, que mejoran el resultado, igualmente podriamos lograrlo, con una animación.
Si os interesa, ahondar más en este tema, os recomiendo que reviseis esta libreria, de CSS, hint.css, y estudieis su código.
Bueno, espero que, os haya gustado, todo este tema, de crear modales y tooltips, y que nuevamente os haya mostrado, todo el poder del CSS, para conseguir, páginas interesantes, para acabar, lo que siempre digo, si algo os ha llamado la atención, exáminarlo, con la herramienta, dev tools del navegador, ó click derecho y ver código fuente de la página, si teneis algún comentario ó sugerencia, que hacerme, agradeceria vuestro contacto, gracias por leer y hasta la proxima.
