10 complementos de ventana modal de JavaScript gratis

Puedes encontrar Un montón de modales CSS puros pero estos No ofrezco el mismo control que JavaScript. Con un modal de JavaScript, puede agregar animaciones personalizadas, entradas de IU y realmente mejorar la experiencia del usuario..

Pero, ¿por qué diseñar algo desde cero cuando puedes usar una biblioteca JS? He recogido el Los mejores scripts modales con JavaScript Aquí para que usted lea y seleccione sus favoritos.

Todos estos son Completamente gratis y de código abierto., para que pueda editar el código y actualizarlos para que se ajusten a su sitio según sea necesario.

1. Tingle

Uno de mis scripts modales gratuitos favoritos es Tingle.js. Sus Construido en JavaScript de vainilla sin dependencias, por lo que no necesita ninguna biblioteca jQuery o Zepto.

Además, es una biblioteca bastante pequeña, aunque tiene Un montón de opciones para la personalización.. Puede cambiar las transiciones de CSS, las animaciones modales de JavaScript y la experiencia del usuario con solo unos pocos ajustes.

Tingle.js está diseñado para ser totalmente accesible y sensible, así que funciona en dispositivos móviles y también es compatible con navegadores antiguos.

Puedes ver Toda la documentación en GitHub., junto con el código fuente libre. También tienen un enlace de demostración, por lo que puede Echa un vistazo a Tingle en acción Para ver si podría caber en su sitio web..

2. Vanilla Modal

Aquí hay un modal que acabo de encontrar y es mucho más simple que la mayoría. Vainilla modal se mantiene fiel a su nombre con una guión puro de vainilla alimentando el modal, junto con Transiciones CSS.

Esta cosa es bastante pequeña y super flexible, con CSS personalizado para remodelar las ventanas. También tiene Bastantes opciones que puedes modificar con JavaScript, haciéndolo perfecto para ejecutar funciones DOM o incluso funciones de devolución de llamada.

Echa un vistazo a la página de demostración para ver el estilo por defecto. Es un diseño muy básico, así que lo hará. Requiere personalizaciones para usarlo en un sitio de producción.. Pero esto también reduce los requisitos totales del código, por lo que es una de las bibliotecas modales de JavaScript más delgadas.

3. plainModal

Si quieres un script realmente simple lo recomiendo altamente plainModal. Es construido en jQuery, pero es Uno de los scripts modales más pequeños disponibles..

Lo hace No usar ningún archivo CSS o imagen externo. Solo un solo script JS es todo lo que necesitas.

Una vez que el script plainModal se agrega a su página, simplemente apuntar el botón modal y eres bueno para ir Esto le otorga control sobre la pantalla y cuánto desea alterar la interfaz modal.

Además, puedes configura el modal con una línea de JavaScript Manteniendo el tema minimalista de este plugin..

4. Moda

No se puede negar La accesibilidad es enorme en la web.. La meta de cada diseñador debe ser una experiencia más inclusiva Para personas de todo el mundo en varios dispositivos y con posibles limitaciones..

Con Modaal, obtienes esa experiencia perfecta que pasa la prueba WCAG 2.0 con un índice de accesibilidad sólido de AA. Puedes ver un ejemplo fantástico en la página principal, junto con la documentación del código..

En general, recomiendo este complemento de vainilla JavaScript Para quien realmente se preocupa por la accesibilidad.. La calificación AA puede ser requerida en algunos proyectos web, por lo que Modaal es un script muy útil para mantenerlo marcado.

5. Scotch JS Modal

El equipo de desarrollo en Scotch.io publica tutoriales y guías para programadores. Su trabajo es increíble y realmente se nota en. este script modal de JavaScript, alojado en el Scotch GitHub.

El modal fue desarrollado por Ken Wheeler y este script incluso tiene un tutorial completo Si quieres aprender cómo funciona. Sin embargo, el código libre debería ser suficiente para la mayoría de los desarrolladores ya que esto es súper ligero y fácil de configurar. Sin dependencias, e incluso una demostración de muestra en CodePen.

6. Bootbox.js

La forma más rápida de lanzar un nuevo proyecto web es a través de Bootstrap. Es un potente marco de frontend que anima a los desarrolladores a Crea sus propios complementos a la biblioteca..

Un ejemplo es Bootbox.js, una pequeña biblioteca de JavaScript, Diseñado únicamente para ventanas modales en Bootstrap.. En realidad trabaja en cuadros de diálogo donde el usuario puede hacer clic en Aceptar o cancelar, según su solicitud.

Los diálogos típicos de JavaScript son horribles, al igual que los cuadros de alerta. El script de Bootbox ofrece una Una sólida alternativa para cualquiera que trabaje en el ecosistema BS3 / BS4..

De nuevo, es totalmente libre y de código abierto, junto con un larga página de documentación para levantarte y correr rápido.

7. iziModal.js

Si tu Necesito una solución un poco más personalizada. revisa iziModal.js. Esta herramienta es totalmente sensible y diseñado para Funciona perfectamente en todos los navegadores modernos..

Todavía tengo que encontrar otro script modal que ofrezca un diseño tan estéticamente agradable. Sale por la puerta con una Hermosa interfaz de usuario que puede combinarse en prácticamente cualquier sitio web. Sin embargo, usted puede tambien remodelar el diseño para satisfacer sus necesidades.

Sólo tenga en cuenta este plugin corre en jQuery, así que es uno de los pocos aquí que tiene una dependencia. Pero, si quieres los estilos iziModal, es un precio pequeño que pagar por estas ventanas emergentes tan elegantes..

8. jQuery Modal

los plugin jQuery modal es quizás el guión modal más simple en jQuery que encontrarás.

Se puede programar para Vincular automáticamente con ciertos elementos HTML Basado en varios atributos. También soporta atajos de teclado tales como ESC para cerrar la ventana.

En total, este plugin. mide menos de 1KB y eso Funciona en todos los navegadores posibles que puedas imaginar.. Los desarrolladores de jQuery deben mantener este complemento guardado para un acceso rápido a un simple script modal sin los extras..

9. PicoModal

Volviendo hacia JavaScript de vainilla, tenemos la Biblioteca picomodal. Este es probablemente uno de los scripts más pequeños que encontrará y está diseñado para corre perfectamente en una columna vertebral de vainilla JavaScript.

Eso soporta todos los navegadores modernos, Incluyendo navegadores móviles para Android y Mobile Safari para iOS. Incluso es compatible con los navegadores IE más antiguos, que se remontan a IE7!

Desarrollador de PicoModal creado un pequeño script JSfiddle para demostrar cómo funciona. Este es un ejemplo muy pequeño y es no atado a un evento de clic o cualquier otra cosa, pero no es difícil script en unos pocos botones de alternar para ejecutar esta ventana modal correctamente.

10. Avgrund

Avgrund Es probablemente uno de los modales más únicos en esta lista. Utiliza un efecto de desvanecimiento de página personalizado, junto con una animación de reducción para poner el derecho modal a la vista.

No todos apreciarán esta animación, así que no puedo decir que este script se ajuste a todos los sitios web. Pero, es un pura vainilla modal y es muy fácil de configurar, con solo un CSS y un archivo de JavaScriptmi.

Echa un vistazo a la página de demostración Para ver cómo funciona. Sin duda tiene un estilo único y es obligado a llamar la atención Con las animaciones personalizadas que solo funcionan..

Ultimas palabras

No importa lo que esté buscando, apuesto a que hay algo en esta lista que se adapta a sus necesidades. Pero, si todavía no estás satisfecho Navega a través de GitHub para ver scripts modales relacionados y ver que mas puedes encontrar.