La técnica de ventana modal oculta es una gran solución para tratar elementos de interfaz que no son particularmente necesarios en la página. Las redes sociales pueden usar ventanas modales para mensajes privados y formularios que solo usan los miembros del sitio. Esto también es válido para los blogs y revistas que tienen una página de inicio de sesión de autor separada del sitio web principal. Las ventanas modales son mucho más fáciles que crear ventanas nuevas en JavaScript porque todo se muestra en la misma ventana usando el marcado HTML que ya se encuentra en la página.
Quiero demostrar cómo podemos crear una ventana modal personalizada basada en el complemento de jQuery leanModal. El complemento es completamente de código abierto y de uso gratuito bajo la licencia general de MIT. Me gusta este plugin más que otros porque solo nos da los "fundamentos básicos"? sin demasiada personalización. Esto deja espacio para actualizar la ventana modal a través de CSS y aún utilizar algunos parámetros adicionales en jQuery.
Demo en vivo - Descargar código fuente
Empezando
Primero he creado dos archivos llamados? Index.html? y? style.css? que contienen todo el código demo. Dentro de este mismo directorio, he creado otra carpeta llamada / js / que contendrá dos documentos. La primera es la última biblioteca mini jQuery y la segunda es el archivo del complemento leanModal llamado jquery.leanModal.min.js.
¡Ahora puede ser una sorpresa saber que no necesitamos incluir ninguna hoja de estilo CSS predeterminada! Esto se debe a que nuestro complemento leanModal solo proporciona funciones JS muy básicas, todo lo demás se reduce para proporcionar una plantilla simple. Sin embargo, necesitamos copiar sobre un bloque de CSS que implementa el efecto de superposición oscura. Esto se copia directamente desde el sitio web del complemento que agregué a mi hoja de estilo predeterminada.
El área de superposición aparecerá al 100% de ancho y alto en la parte superior de la página. Luego, jQuery agregará el div modal dirigido para que aparezca encima de todo lo demás en el HTML. Notoriamente el contenido de mi cuerpo está bastante vacío, el único elemento importante es el botón de alternar para mostrar esta ventana modal. Pero echemos un vistazo dentro del formulario HTML encapsulado dentro del #loginmodal div.
Nota que he incluido pantalla: ninguna; como una sola propiedad CSS en línea. Necesitamos forzar a este div para que no se muestre, de modo que leanModal () puede hacer que se funda en la página y se muestre como un elemento de bloque. Estoy usando un formulario de visualización muy simple con estilos similares a este formulario de pago de CSS. El diseño azul claro funciona bien en contraste con la superposición de sombras más oscuras, además, podemos utilizar los efectos de transición CSS3 en los campos de entrada.
Otro elemento crucial de la página es el botón de enviar. Dado que este formulario no enviará ningún dato al servidor, solo queremos ocultar la ventana modal una vez que el usuario envíe. He añadido la clase .hidemodal que podemos configurar dentro del método jQuery. Detendrá el envío del formulario predeterminado y mostrará esta ventana modal como un efecto puramente estético.
Estilos de diseño CSS
Mi documento CSS contiene todos los restablecimientos de página típicos que necesitamos, junto con algunos de los estilos de tipografía y botón. La ventana modal de inicio de sesión centrada contiene un nuevo estilo de botón que imita al otro diseño plano. Pero afortunadamente no hay demasiadas propiedades CSS únicas que requieren una explicación más detallada. Debería poder construir sus propios estilos de ventana modales sin mucho problema.
Creo que los elementos clave a reconocer son los contenedores para el efecto de superposición y la ventana modal. Los he movido a la parte inferior de la hoja de estilo, agrupados con todas las demás propiedades de la ventana modal. He limitado la ventana modal a un ancho de 300px ya que este ejemplo solo requiere un formulario con 2 entradas. Pero recuerde que leanModal no fuerza ningún estilo predeterminado en su ventana, por lo que el diseño está 100% en sus manos.
Cada uno de los campos de texto tiene un efecto de animación de transición en las sombras del borde y del cuadro. También el color del texto se desvanecerá a medida que la pestaña entre las dos entradas. Elegí un esquema de color azul más claro y combiné los efectos de los botones con los campos de entrada. Hay muchas propiedades de CSS3 junto con los prefijos de sus proveedores, por lo que esta forma está más orientada a los nuevos motores de renderización. Pero debería mostrarse correctamente en todos los principales navegadores.
Efecto modal en jQuery
Lamentablemente, CSS3 no se encuentra en un punto en el que podamos confiar en su capacidad para ocultar / mostrar diferentes ventanas en un evento de clic. Y no hay garantía de que esto alguna vez sea una posibilidad, tampoco. Cuando se trata de ventanas modales que utilizan un efecto de caja de sombra, será mucho más fácil mantener JavaScript. Afortunadamente, el complemento leanModal solo necesita una sola línea de JS para activarse. He añadido el siguiente bloque de código justo antes de mi cierre etiqueta.
El primer bloque pequeño de código comprobará cada vez que el usuario presione? ¿Iniciar sesión? e intenta enviar el formulario. Estamos utilizando las palabras clave de JavaScript falso retorno para detener el evento antes de que incluso se dispara. Puedes leer más sobre este método en Stack Overflow. Ahora, la última línea de código es todo lo que necesitamos para que la ventana modal funcione.
Si no necesitamos personalizar ningún parámetro, solo la línea $ ('# modaltrigger'). leanModal () debería funcionar muy bien Sin embargo, para esta demostración quiero mostrar las 3 variables opcionales que puede pasar a la función. Primero, agregamos el valor de desplazamiento desde la parte superior de la ventana para posicionar este nuevo cuadro modal. Luego se usa un valor de 0.0-1.0 para marcar el nivel de opacidad de fondo.
Y, finalmente, podemos adjuntar un nuevo selector jQuery para el botón de cierre. Esto puede ser una clase o una ID, o alguna mezcla que incluya selectores de atributos HTML. Para mi ejemplo, estamos usando la misma clase que agregué al botón de inicio de sesión .hidemodal. De esta manera, la ventana modal debería ocultarse cada vez que presione el botón enviar.
Para que el formulario realmente funcione, deberá eliminar esta clase del botón y eliminar el bloque de código JavaScript antes de la función leanModal (). Luego, el formulario se enviará correctamente y debe redirigir al usuario a una nueva página. Pero debe probar muchas ideas diferentes y ver qué tipos de contenido pueden funcionar bien dentro de una visualización modal.
Demo en vivo - Descargar código fuente
Pensamientos finales
El efecto de ventana modal se puede utilizar en muchas más situaciones que solo formularios de inicio de sesión. Debe pensar en varios elementos de la interfaz de usuario de una página web y considerar qué elementos pueden ser más útiles en su propia ventana. Esto se refiere a formularios especiales o contenido detallado más largo que no será reconocido por todos los visitantes.
Por favor revise mi demostración de muestra en vivo y vea cómo podemos implementar este efecto leanModal jQuery usando bloques HTML estándar. Cualquiera que tenga conocimientos básicos de CSS no debería tener problemas para personalizar mis estilos predeterminados. Hay tantas aplicaciones para esta funcionalidad que es mejor dejarla en manos de la imaginación. Pero espero que estos ejemplos de códigos de tutoriales puedan proporcionar una plantilla base para los desarrolladores que buscan ahorrar tiempo en su próximo proyecto.