10 plugins de fenêtre modale JavaScript gratuits

Tu peux trouver beaucoup de modaux CSS purs mais ceux-ci n'offre pas le même contrôle que JavaScript. Avec un modal JavaScript, vous pouvez ajouter des animations personnalisées, des entrées d'interface utilisateur et améliorer réellement l'expérience utilisateur..

Mais pourquoi concevoir quelque chose à partir de zéro quand vous pouvez utiliser une bibliothèque JS? J'ai rassemblé le meilleurs scripts modaux gratuits basés sur JavaScript ici pour que vous parcouriez et choisissiez vos favoris.

Tous sont complètement gratuit et open-source, afin que vous puissiez éditer le code et les redessiner pour s’adapter à votre site au besoin.

1. Tingle

Un de mes scripts modaux gratuits préférés est Tingle.js. Ses construit sur JavaScript vanille sans dépendances, vous n'avez donc pas besoin de bibliothèques jQuery ou Zepto.

De plus, c'est une bibliothèque assez petite, bien qu'elle ait beaucoup d'options pour la personnalisation. Vous pouvez modifier les transitions CSS, les animations modales JavaScript et l'expérience utilisateur dans son intégralité avec quelques paramètres seulement..

Tingle.js est conçu pour être entièrement accessible et réactif, il fonctionne donc sur les appareils mobiles et prend également en charge les anciens navigateurs.

Tu peux voir toute la documentation sur GitHub, avec le code source gratuit. Ils ont également un lien de démonstration, de sorte que vous pouvez Découvrez Tingle en action pour voir si cela pourrait tenir sur votre site web.

2. vanille modale

Voici un modal que je viens de trouver récemment et c'est beaucoup plus simple que la plupart. Vanille modale est fidèle à son nom avec un script vanille pure alimentant le modal, avec Transitions CSS.

Cette chose est assez petite et super flexible, avec CSS personnalisé pour relooker les fenêtres. Cela a aussi de nombreuses options que vous pouvez modifier avec JavaScript, le rendant parfait pour exécuter des fonctions DOM ou même des fonctions de rappel.

Jetez un coup d'oeil au page de démonstration pour voir le style par défaut. C'est un design vraiment basique, donc ça va nécessiter des personnalisations pour l'utiliser sur un site de production. Mais cela réduit également le total des exigences du code, donc il est une des bibliothèques modales JavaScript les plus minces.

3. plainModal

Si vous voulez un script très simple, je vous le recommande vivement. PlainModal. Il est construit sur jQuery, mais c'est l'un des plus petits scripts modaux disponibles.

Cela fait n'utilisez aucun fichier CSS ou image externe. Un seul script JS suffit.

Une fois le script plainModal ajouté à votre page, il vous suffit de cibler le bouton modal et vous êtes prêt à partir. Cela vous permet de contrôler l'affichage et le nombre de modifications que vous souhaitez apporter à l'interface modale..

De plus, vous pouvez mettre en place le modal avec une ligne de JavaScript en accord avec le thème minimaliste de ce plugin.

4. Modaal

Il n'y a pas de doute l'accessibilité est énorme sur le web. L’objectif de chaque designer doit être expérience plus inclusive pour les gens du monde entier sur divers appareils et avec des limitations possibles.

Avec Modaal, vous obtenez cette expérience parfaite qui passe le test WCAG 2.0 avec une cote d'accessibilité AA solide. Vous pouvez voir un exemple fantastique sur la page principale, avec de la documentation sur le code.

Globalement, je recommande ce plugin JavaScript à la vanille pour tous ceux qui se soucient vraiment de l'accessibilité. La note AA peut être requise pour certains projets Web. Modaal est donc un script très pratique à garder en favori..

5. Scotch JS Modal

L’équipe de développement de Scotch.io publie des tutoriels et des guides pour les programmeurs. Leur travail est incroyable et cela se voit vraiment dans ce script modal JavaScript, hébergé sur le Scotch GitHub.

Le modal a été développé par Ken Wheeler et ce script a même a un tutoriel complet si vous voulez apprendre comment ça marche. Cependant, le code libre devrait suffire à la plupart des développeurs car c’est super léger et facile à installer. Aucune dépendance et même un exemple de démonstration sur CodePen.

6. Bootbox.js

Le moyen le plus rapide de lancer un nouveau projet web est à travers Bootstrap. C’est un framework frontal puissant qui encourage les développeurs à créer leurs propres add-ons à la bibliothèque.

Un tel exemple est Bootbox.js, une petite bibliothèque JavaScript, conçu uniquement pour les fenêtres modales dans Bootstrap. Il fait fonctionne sur les boîtes de dialogue où l'utilisateur peut cliquer sur OK ou annuler, en fonction de votre demande.

Les dialogues JavaScript typiques sont affreux, tout comme les boîtes d'alerte. Le script Bootbox offre une alternative solide pour toute personne travaillant dans l'écosystème BS3 / BS4.

Encore une fois, c'est totalement gratuit et open-source, avec un longue page de documentation pour vous mettre en mouvement rapidement.

7. iziModal.js

Si vous besoin d'une solution un peu plus personnalisée check-out iziModal.js. Cet outil est entièrement réactif et conçu pour fonctionne parfaitement dans tous les navigateurs modernes.

Je n'ai pas encore trouvé de script modal offrant un design aussi esthétique. Il sort la porte avec un superbe interface utilisateur qui peut se fondre dans pratiquement tous les sites Web. Cependant, vous pouvez aussi relooker le design pour répondre à vos besoins.

Il suffit de noter ce plugin fonctionne sur jQuery, il est donc l'un des rares ici qui a une dépendance. Mais si vous voulez les styles iziModal, c'est un petit prix à payer pour de telles fenêtres popover.

8. jQuery Modal

le plugin jQuery Modal est peut-être le Le script modal le plus simple que vous trouverez sur jQuery.

Il peut être programmé pour lier automatiquement avec certains éléments HTML basé sur divers attributs. Ça aussi supporte les raccourcis clavier comme ESC pour fermer la fenêtre.

Au total, ce plugin mesure moins de 1Ko et cela fonctionne dans tous les navigateurs possibles que vous pouvez imaginer. Les développeurs jQuery devraient garder ce plugin enregistré pour un accès rapide à un script modal simple, sans fioritures supplémentaires..

9. PicoModal

Pour revenir à JavaScript vanille, nous avons le Bibliothèque PicoModal. C’est probablement l’un des plus petits scripts que vous trouverez et il est conçu pour fonctionne parfaitement sur une dorsale JavaScript vanille.

Il prend en charge tous les navigateurs modernes, y compris les navigateurs mobiles pour Android et Mobile Safari pour iOS. Il supporte même les anciens navigateurs IE, remontant à IE7!

Développeur de PicoModal créé un petit script JSfiddle pour démontrer comment cela fonctionne. Ceci est un très petit exemple et c'est non lié à un événement de clic ou autre chose, mais ce n'est pas difficile à script dans quelques boutons bascule pour exécuter cette fenêtre modale correctement.

10. Avgrund

Avgrund est probablement l'un des modaux les plus uniques de cette liste. Il utilise un effet de fondu de page personnalisé, avec une animation réduite mettre en évidence le modal.

Tout le monde n'appréciera pas cette animation, je ne peux donc pas dire que ce script conviendrait à tous les sites Web. Mais c’est un pur modal à la vanille et c'est super facile à mettre en place, avec juste un CSS et un fil JavaScripte.

Regardez le page de démonstration pour voir comment ça marche. Il a certainement un style unique et est lié pour attirer l'attention avec les animations personnalisées qui fonctionnent.

Mots finaux

Peu importe ce que vous recherchez, je parie que cette liste répond à vos besoins. Mais si vous n'êtes toujours pas satisfait parcourez GitHub pour les scripts modaux associés et voir ce que vous pouvez trouver d'autre.