Fenêtre modale JQuery - à quoi ça sert et comment l'installer

Table des matières:

Fenêtre modale JQuery - à quoi ça sert et comment l'installer
Fenêtre modale JQuery - à quoi ça sert et comment l'installer
Anonim

Pour trouver la réponse à votre question, il faut parfois passer beaucoup de temps, surtout si, en ce qui concerne la conception de sites Web, une personne qui n'est pas particulièrement versée dans ce domaine a décidé de créer un site tout seul. Une fenêtre modale jquery peut être l'une de ces tâches angoissantes.

Vous pouvez trouver beaucoup de ces fenêtres sur Internet. Il semble qu'il vous suffise de les copier et de les coller sur votre site… Cependant, tout n'est pas si simple. Par chance, il y a des détails qui ralentissent tout, et il est impossible de résoudre la tâche, car aucune connaissance n'est nécessaire pour cela. Par conséquent, plutôt que d'intimider immédiatement une fenêtre modale sur jQuery avec de nombreuses fonctionnalités intéressantes difficiles à mettre en œuvre, il est préférable de commencer avec une petite fenêtre modale la plus simple sans aucun problème inutile.

S'il y a un blog quelque part sur wordpress, alors tout est très simple, et généralement il n'y a pas de difficultés, car il a déjà de nombreuses solutions toutes faites - divers modules contextuels. Mais il existe également des options complètement différentes où vous devez «sculpter» vous-même une fenêtre modale ou vous tourner vers les services payants de spécialistes. Comme vous le savez, personne ne veut payer, surtout quand il semble que vous n'avez qu'à aller au fond des choses, et tout ira assez vite etentièrement gratuit.

Une fenêtre modale jquery est nécessaire pour afficher le contenu qui accompagne les informations sur la page et les complète.

jQuery - qu'est-ce que c'est ?

Pour une compréhension complète, si quelqu'un ne sait pas, alors jquery est une bibliothèque JavaScript, et cette dernière, à son tour, signifie un morceau de code qui est intégré dans le code d'une page Web et vous permet d'atteindre différents effets qui ne peuvent pas être implémentés dans HTML et CSS. Un exemple typique d'un tel morceau de code serait la date ou l'heure actuelle affichée sur la page.

Les développeurs de la bibliothèque ont un site Web officiel, qui est constamment amélioré et mis à jour, en relation avec toutes les nouvelles versions proposant de nouvelles bibliothèques.

Pour indiquer à jquery que vous avez besoin de tel ou tel effet, il existe un langage CSS avec des feuilles de style.

langage CSS

CSS signifie feuilles de style en cascade. Il est désormais impossible de trouver un site sur Internet qui n'utilise pas cette langue.

Par conséquent, dans les fenêtres modales, jquery et CSS sont presque indispensables et indispensables. Par conséquent, si jquery n'est pas inclus, vous devez le faire.

Pour ce faire, ce qui suit est inséré à l'intérieur de la balise head:

jQuery
jQuery

À quoi servent les modaux ?

Un simple modal jquery qui s'affiche lorsque le site se charge peut être utile pour obtenir plus d'abonnés. La fenêtre apparaîtra lorsque la page s'ouvrira. Ce n'est pas très distrayant et il est peu probable qu'il effraie qui que ce soit, car au moindre inconfort, il est facile dese ferme, et le bouton de fermeture contiendra des cookies, et lorsque vous cliquerez dessus, la fenêtre modale disparue ne réapparaîtra plus.

Fenêtre contextuelle

Une fenêtre contextuelle jquery qui n'apparaît qu'une seule fois par page est une variante des fenêtres modales.

Pour le mettre en œuvre, un certain nombre d'étapes doivent être franchies.

Vous pouvez utiliser des plugins spéciaux pour les fenêtres modales. Il est préférable de les télécharger à partir de sites de développeurs comme arcticModal. Il se connecte comme suit:

fenêtre modale jQuery
fenêtre modale jQuery

Sans style de fenêtre, l'un des thèmes standard du plugin ressemblera à ceci:

fenêtre modale simple jQuery
fenêtre modale simple jQuery

Ensuite, le plugin cookie est connecté:

fenêtre modale jQuery
fenêtre modale jQuery

Écrire du code HTML qui fournit des informations à l'utilisateur:

fenêtre modale jQuery
fenêtre modale jQuery

La classe arctimonial-close spécifiée dans le code signifie que la fenêtre modale jQuery se fermera avec elle.

Vient ensuite le script final:

Fenêtre contextuelle modale jQuery
Fenêtre contextuelle modale jQuery

Certains des paramètres utilisés ont la signification suivante:

closeOnOverClick: déterminera si la fenêtre se ferme lorsque la superposition est cliquée.

CloseOn Esc: signifie cliquer sur Esc.

Expires: Spécifie la durée pendant laquelle le cookie sera stocké. Dans la version proposée, ce délai sera de soixante jours, c'est-à-dire que la fenêtre ne s'affichera pas pendant deux mois. Le cookie est mis à jour à chaque visite.

Apprentissage de l'installation sur votrefenêtre modale jQuery sur le site, vous pouvez passer à des options plus complexes si nécessaire. Pour cela, une variété de styles CSS sont ajoutés, et la fenêtre deviendra complètement différente des fenêtres modales sur d'autres sites.

La fantaisie et l'imagination aideront à augmenter considérablement le nombre d'abonnés grâce à de telles solutions, et les fenêtres modales habilement insérées dans les magasins en ligne peuvent multiplier les ventes. Par conséquent, le temps consacré à la programmation et à l'installation de Windows sera justifié et sera certainement payant !

Types de fenêtres modales

Les fenêtres modales peuvent être pop-up lorsque vous cliquez sur le bouton correspondant ou chargées avec la page et apparaître immédiatement lors du chargement. Ils peuvent ne plus apparaître à la fermeture pendant un certain temps si un cookie est installé, comme dans l'exemple décrit ci-dessus, ou ils peuvent apparaître à chaque chargement de la page. Il existe des fenêtres modales qui sont fixées à un endroit et y restent, malgré les mouvements sur la page, et peuvent être dynamiques lorsque la fenêtre contient des informations avec un lien, et que l'utilisateur la traverse. Ensuite, seule la fenêtre sera mise à jour, tandis que la page d'origine reste inchangée.

Conseillé: