La technique de la fenêtre modale cachée est une excellente solution pour traiter les éléments d'interface qui ne sont pas particulièrement nécessaires sur la page. Les réseaux sociaux peuvent utiliser des fenêtres modales pour les messages privés et les formulaires qui ne sont utilisés que par les membres du site. Cela est également vrai pour les blogs et les magazines qui ont une page de connexion d'auteur distincte du site Web principal. Les fenêtres modales sont beaucoup plus faciles que la création de nouvelles fenêtres en JavaScript car tout est affiché dans la même fenêtre à l'aide du balisage HTML déjà présent sur la page.
Je veux montrer comment nous pouvons construire une fenêtre modale personnalisée basée sur le plugin jQuery leanModal. Le plugin est complètement open source et libre d'utilisation sous la licence générale du MIT. J'aime ce plugin plus que d'autres parce qu'il nous donne juste les "bases nues"? sans trop de personnalisation. Cela laisse de la place pour mettre à jour la fenêtre modale via CSS tout en utilisant des paramètres supplémentaires dans jQuery.
Live Demo - Télécharger le code source
Commencer
J'ai d'abord créé deux fichiers nommés? Index.html? et? style.css? qui contiennent tout le code de démonstration. Dans ce même répertoire, j'ai créé un autre dossier nommé / js / qui contiendra deux documents. La première est la dernière bibliothèque mini jQuery et la deuxième est le fichier de plugin leanModal nommé jquery.leanModal.min.js.
Maintenant, il peut être surprenant d'apprendre que nous n'avons pas besoin d'inclure de feuille de style CSS par défaut! En effet, notre plugin leanModal ne fournit que des fonctions JS très basiques, tout le reste est réduit pour fournir un modèle nu. Cependant, nous devons copier un bloc de CSS qui implémente l’effet de superposition sombre. Ceci est directement copié du site Web du plugin que j'ai ajouté à ma feuille de style par défaut.
La zone de surimpression apparaîtra à 100% en largeur et en hauteur en haut de la page. Ensuite, jQuery ajoutera le div modal ciblé pour apparaître au-dessus de tout le reste du code HTML. Le contenu de mon corps est visiblement vide, le seul élément important est le bouton bascule permettant d'afficher cette fenêtre modale. Mais jetons un coup d'oeil à l'intérieur du formulaire HTML encapsulé dans le #loginmodal div.
Note j'ai inclus affichage: aucun; comme une seule propriété CSS intégrée. Nous devons forcer cette div à ne pas avoir d’affichage afin que leanModal () puisse le faire disparaître dans la page et l’afficher sous forme d’élément de bloc. J'utilise un affichage de formulaire très simple avec des styles similaires à celui de ce formulaire de commande CSS. La conception bleu clair fonctionne bien contrairement à la superposition d'ombres plus sombres. De plus, nous pouvons utiliser des effets de transition CSS3 sur les champs d'entrée.
Un autre élément crucial de la page est le bouton d'envoi. Comme ce formulaire n'enverra aucune donnée au serveur, nous souhaitons simplement masquer la fenêtre modale une fois que l'utilisateur l'a soumise. J'ai ajouté la classe .hidemodal que nous pouvons configurer dans la méthode jQuery. Cela arrêtera la soumission du formulaire par défaut et affichera cette fenêtre modale comme un effet purement esthétique.
Styles de mise en page CSS
Mon document CSS contient toutes les réinitialisations de page types dont nous avons besoin, ainsi que certains styles et types de boutons. La fenêtre modale de connexion centrée contient un nouveau style de bouton imitant l'autre design plat. Mais heureusement, il n'y a pas trop de propriétés CSS uniques qui nécessitent une explication supplémentaire. Vous devriez être capable de construire vos propres styles de fenêtre modale sans trop de tracas.
Je pense que les éléments clés à reconnaître sont les conteneurs pour l’effet de superposition et la fenêtre modale. J'ai déplacé ceux-ci vers le bas de la feuille de style, regroupés avec toutes les autres propriétés de la fenêtre modale. J'ai limité la fenêtre modale à une largeur de 300 px, car cet exemple nécessite uniquement un formulaire avec 2 entrées. Mais rappelez-vous que leanModal ne force aucun style par défaut sur votre fenêtre, le design est donc à 100% entre vos mains.
Chacun des champs de texte a un effet d'animation de transition sur les ombres de bordure et de zone. De plus, la couleur du texte s'estompera à mesure que vous ferez défiler les deux entrées. J'ai choisi un jeu de couleurs bleu plus clair et assorti les effets de boutons aux champs de saisie. Il existe de nombreuses propriétés CSS3 ainsi que leurs préfixes de fournisseur. Ce formulaire s'adresse donc davantage aux moteurs de rendu les plus récents. Mais il devrait s'afficher correctement dans tous les principaux navigateurs.
Effet modal dans jQuery
Malheureusement, CSS3 n’est pas à un point où nous pouvons compter sur sa capacité à masquer / afficher différentes fenêtres sur un événement click. Et rien ne garantit que cela sera jamais une possibilité non plus. Quand il s'agit de fenêtres modales utilisant un effet shadowbox, il sera beaucoup plus facile de s'en tenir à JavaScript. Heureusement, le plugin leanModal n'a besoin que d'une seule ligne de JS pour être activé. J'ai ajouté le bloc de code suivant juste avant ma fermeture étiquette.
Le premier petit bloc de code sera vérifié chaque fois que l'utilisateur appuiera sur? Connexion? et tente de soumettre le formulaire. Nous utilisons les mots-clés JavaScript retourne faux d'arrêter l'événement avant même qu'il ne se déclenche. Vous pouvez en savoir plus sur cette méthode sur Stack Overflow. Maintenant, la dernière ligne de code est tout ce dont nous avons besoin pour que la fenêtre modale fonctionne.
Si nous n’avons pas besoin de personnaliser les paramètres, il ne reste que la ligne $ ('# modaltrigger'). leanModal () devrait fonctionner très bien. Cependant, pour cette démonstration, je souhaite présenter les 3 variables facultatives que vous pouvez transmettre à la fonction. Nous ajoutons d’abord la valeur de décalage à partir du haut de la fenêtre pour positionner cette nouvelle boîte modale. Ensuite, une valeur comprise entre 0,0 et 1,0 est utilisée pour marquer le niveau d'opacité de l'arrière-plan.
Et enfin, nous pouvons attacher un nouveau sélecteur jQuery pour le bouton de fermeture. Cela peut être une classe ou un ID, ou un mélange comprenant des sélecteurs d'attributs HTML. Pour mon exemple, nous utilisons la même classe que j'ai ajoutée au bouton de connexion .hidemodal. De cette façon, la fenêtre modale devrait se cacher chaque fois que vous appuyez sur le bouton d'envoi.
Pour que le formulaire fonctionne réellement, vous devez supprimer cette classe du bouton et supprimer le bloc de code JavaScript avant la fonction leanModal (). Ensuite, le formulaire sera soumis correctement et doit rediriger l'utilisateur vers une nouvelle page. Mais vous devriez essayer beaucoup d’idées différentes et voir quels types de contenu peuvent bien fonctionner dans un affichage modal.
Live Demo - Télécharger le code source
Dernières pensées
L'effet de fenêtre modale peut être utilisé dans bien plus de situations que les formulaires de connexion. Vous devez réfléchir aux différents éléments d'interface utilisateur d'une page Web et déterminer quels éléments peuvent être plus utiles dans leur propre fenêtre. Cela concerne les formulaires spéciaux ou les contenus plus détaillés qui ne seront pas reconnus par tous les visiteurs.
Veuillez consulter ma démonstration d’échantillon en direct et voir comment nous pouvons implémenter cet effet leanModal jQuery à l’aide de blocs HTML standard. Toute personne ayant une connaissance de base de CSS ne devrait avoir aucun problème pour personnaliser mes styles par défaut. Il y a tellement d'utilisations de cette fonctionnalité qu'il vaut mieux laisser à l'imagination. Mais j'espère que ces exemples de codes de didacticiel fourniront un modèle de base aux développeurs souhaitant gagner du temps sur leur prochain projet.