Crear ventana modal solo con CSS3 sin JavaScript

Por user Juan José Pino Reyes
Crear ventana modal solo con CSS3 sin JavaScript

En este tutorial crearemos una ventana modal, con facilidad, haciendo uso solo de HTML y CSS3, sin necesidad de JavaScript.

Para explicar cómo crear una ventana modal solo con CSS3 emplearemos la aplicación web Codepen.io que nos permite mostrar el código empleado, utilizaremos las pestañas HTML, CSS y Result, para mostar el código HTML, CSS y el resultado respectivamente

En este tutorial utilizaremos propiedades CSS3 como pointer-event, transition, entre otras y la pseudo-clase target.

Primero, crearemos el enlace que activará; nuestro modal, para esto en el atributo “href” colocaremos el ID del elemento DIV que contendrá nuestra ventana modal como vemos en el ejemplo.

See the Pen mejbeK by Devcode.la (@devcodela) on CodePen.


En segundo paso, llenamos el contenido de nuestro modal y le asignamos algunos estilos. Nuestro elemento DIV de clase “modal-contenido” contendrá el diseño y mensaje del modal que deseamos mostrar y nuestro elemento DIV de clase “modal” contendrá el fondo que abarcará toda la pantalla y opacará el contenido inicial.

See the Pen pjZzNv by Devcode.la (@devcodela) on CodePen.

Como tercer paso, agregaremos la propiedad opacity con valor 0 a nuestro elemento DIV de clase “modal” para hacerlo transparente, esto aún no es suficiente dado que no nos permite clicar elementos debajo de él. Para solucionar esto, le agregaremos la propiedad pointer-events con el valor “none” y por fin podremos dar click en nuestro enlace “Abrir Modal”.

See the Pen GpBKEw by Devcode.la (@devcodela) on CodePen.

Como cuarto paso, crearemos la funcionalidad que activará nuestra ventana modal, utilizando la pseudo-clase target en la clase “modal”, con las propiedades opacity igual a 1 y pointer-events igual a auto, esto hará que al momento de dar click en el enlace “Abrir Modal” nuestro modal deje de ser transparente y se muestre totalmente, así mismo, al cambiar el valor pointer-events de none a auto podremos ahora dar click dentro de él.

En el quinto paso, damos click en “Abrir Modal” y veremos que se muestra el modal correctamente. Luego, al dar click en la letra “X” desaparece debido a que el enlace de de esta letra referencia a “#”, en este caso las propiedades de la pseudoclase creadas no afectarán el modal dado que solo se activará cuando se referencia al elemento con ID “miModal”.

See the Pen gajYGq by Devcode.la (@devcodela) on CodePen.

Finalmente, la propiedad transition para darle una aparición y desvanecimiento suavizado y no tan brusco.

See the Pen OywLQY by Devcode.la (@devcodela) on CodePen.

Ahora, hemos aprendido a crear un modal sin utilizar JavaScript, puedes utilizar este ejemplo para crear modals con diferentes objetivos, para mostrar un formulario de login o registro, para mostrar videos o imágenes, para mostrar anuncios, entre otros, solo deberás modificar el diseño del elemento DIV con ID “modal-contenido” y ajustarlo a tus necesidades.

"Existen diversas maneras de hacer un modal, la mayoría de ejemplos que puedes encontrar se hacen con JavaScript o con alguna librería, una razón importante por la cual te recomendamos hacerlo sin JavaScript es para optimizar el tiempo de carga de tu página web además de emplear menos líneas de código y explotar de manera más eficiente el potencial que nos brindan los últimos estándres, HTML5 y CSS3."

Cabe tener en cuenta que debido a las propiedades CSS3 empleadas, este modal debería funcionar correctamente en todos los navegadores modernos y en Internet Explorer 9 en adelante.

En nuestro Curso de CSS3 puedes conocer estas y más propiedades que empleamos en el tutorial. Nos vemos en un próximo tutorial.

user

Juan José Pino Reyes

CMO y Co-fundador de Devcode.la, Google Adwords Certified, Google Analytics Certified, Hootsuite Certified, con experiencia y apasionado por el Marketing digital, HTML5, CSS3, JavaScript y PHP.