Desarrolla Modals usando Pure CSS con CSS Modal

En el diseño web, debe tener una buena organización de contenidos. Esto ayuda a brindar a los usuarios información más legible y funcional. Puede hacerlo creando un diseño limpio y ordenado en el sitio web. Para organizar el contenido, hay muchos elementos y estructuras de interfaz que puede usar, y el diálogo modal es uno de ellos.

Si ha estado creando un diálogo modal con jQuery u otros complementos, tenemos algunas buenas noticias para usted. Con la biblioteca CSS Modal, solo necesitará CSS puro.

Hans Christian Reinl, quien desarrolló CSS ​​Modal, ha incluido muchas ventajas que vienen con él. Algunas de las ventajas son que se puede usar como un complemento SASS, existe soporte para navegadores cruzados, está optimizado para dispositivos móviles, puede insertarse con medios (imagen, video y sonido), y es pequeño y rápido.

Casi todos los navegadores modernos son compatibles con CSS Modal . Ha sido probado en Chrome, Firefox, Safari 6, Opera 12, IE8, IE9 +, Windows Phone 8, iOS 6 y Android. Si bien todavía tiene problemas menores para Android 2.3 (el desplazamiento es el mayor problema, al momento de escribir), sigue funcionando bien.

Marcado HTML

CSS Modal tiene tres partes para trabajar: encabezado, contenido y pie de página . El header es donde puede poner el título para el modal. El contenido es para mostrar la información importante que desea resaltar. Esta parte es compatible con texto, imágenes y código incrustado. En cuanto al footer, puede agregar información adicional aquí, como un botón de cerrar, un botón de abrir una nueva ventana, etc.

Para crear un cuadro de diálogo modal, debe usar la etiqueta de section y algunos data-attributes predefinidos, clase e id. Dentro de la etiqueta de section, debe incluirse un elemento envuelto con .modal-inner clase .modal-inner . Aquí está el marcado básico:

La id en la etiqueta de section se usa para llamar al modal desde otra función, por ejemplo, mediante un enlace, y el valor se puede cambiar según sea necesario. a etiqueta en el código, se usará como el botón de cierre modal. El atributo del href debe dejarse como se muestra arriba, ya que evitará que la página se desplace hacia la parte superior cuando se haga clic.

El header y el footer son partes opcionales, que puede incluir (o no). Pero tenga en cuenta que, si usa un encabezado, debe agregar un nombre de ID único y cambiar el atributo aria-labelledby al mismo valor.

No se olvide de incluir la biblioteca de CSS Modal, que puede descargar desde su página de GitHub, a su proyecto.

 ..  .. 

Javascript adicional

Todavía existen algunos problemas cuando utiliza CSS Modal con CSS puro, como por ejemplo:

• Problemas con la compatibilidad con IE 8
• Teclado Botón de escape para salir
• Desplazamiento de prevención de fondo
• Efecto de enfoque al modal y de regreso a la página después de cerrarlo

Entonces, para solucionar esos problemas, aún se necesita JavaScript aquí. Afortunadamente, CSS Modal le ha proporcionado un código fuente javascript liviano para su conveniencia. Incluya este código antes de su etiqueta de body cierre.

Pensamiento final

Crear modal con CSS puro todavía tiene algunos inconvenientes, pero puede convertirse en una herramienta alternativa para enriquecer aún más tu sitio web. Y probablemente quieras probar algo ligeramente diferente. Con un poco de creatividad, podrías hacer algunos modals increíbles. Dale un tiro.

10 mejores motores de búsqueda de aplicaciones móviles

Si usted es un usuario de iOS, es casi seguro que use la App Store para encontrar la aplicación que desea instalar en su teléfono. Sin embargo, las capacidades de búsqueda para la App Store distan mucho de ser poderosas. No te ayuda a encontrar alternativas a las aplicaciones que normalmente obtienes. P

(Consejos de tecnología y diseño)

Ver todas las notificaciones en una única carpeta de aplicaciones con 3D Touch

Tener demasiadas aplicaciones en tu iPhone puede generar dolores de cabeza cuando se trata de administración de notificaciones de aplicaciones, especialmente si las aplicaciones se dividen en varias carpetas. Afortunadamente, hay un atajo que le permite ver todas las notificaciones de aplicaciones que están agrupadas en una sola carpeta mediante la magia de 3D Touch.C

(Consejos de tecnología y diseño)