Toutes les actions et animations sont écrites en code javascript à l'aide de la bibliothèque jquery. Pour distinguer les blocs les uns des autres, des balises id="" et class="" sont ajoutées aux balises ; des règles d'affichage leur seront assignées dans la feuille de style. Le bloc peut être appelé via un lien, lorsqu'un bouton est cliqué ou lorsque la page est chargée pour la première fois. Ces actions sont programmées en javascript à l'aide d'une source d'événement click ou onclick.

Pour éviter toute question sur les abréviations à l’avenir :

• jq-jquery;
• Js-javascript.

Au total, le matériel considérera 4 exemples utilisant différentes méthodes, y compris l'utilisation de la fonction d'interface utilisateur de dialogue intégrée dans jq. Il existe également 2 options en javavscript pur et en html.

Tous les propriétaires de blogs ou de magasins ne souhaitent pas bricoler divers codes javascript. Pour les CMS populaires tels que wordpress, joomla, opencard, etc., il existe des plugins intégrés.

Les plugins WordPress les plus populaires pour créer une fenêtre popup :

• Fenêtre contextuelle du formulaire de contact ;
• Fenêtre contextuelle Ninja ;
• Modal facile ;
• Plugin de promotions ;
• Pop-ups ultimes.

Pour Joomla :

• JCE MediaBox ;
• Fenêtre contextuelle simple

Il existe de nombreux autres analogues similaires, mais ils remplissent tous la même fonction. Seule la conception du menu dans lequel l'utilisateur travaille diffère.

Examinons des exemples de base de travail avec différentes méthodes de création de fenêtres et analysons chaque étape par étape.

Dans un premier temps, il vaut mieux considérer un exemple utilisant html et javascript. Vous devez d’abord connecter la bibliothèque jq à la page. Pour cela, utilisez la commande "commande 1". Il doit être inséré au tout début du fichier, si vous ne vous connectez pas à la bibliothèque, alors les fadeIn, fadeOut, etc.

Initialement, une structure de page balisée est créée, composée principalement de blocs div. Dans l'exemple ci-dessus, javascript affiche les informations de différents objets, vous pouvez donc saisir un deuxième div en lui donnant le paramètre iddiv= "box_" après le trait de soulignement, un numéro unique est indiqué.

div (largeur : 400 px ; position : relative ; marge : 10 % auto ; remplissage : 5 px 20 px 13 px 20 px ; rayon de bordure : 10 px ; arrière-plan : #fff ; arrière-plan : -moz-linear-gradient(#fff, #999) ; arrière-plan : -webkit-linear-gradient(#fff, #999); arrière-plan : -o-linear-gradient(#fff, #999); )

Pseudo-classe cible change le mode d'affichage de l'élément, donc notre fenêtre modale sera affichée lorsque vous cliquerez sur le lien. Nous modifions également la valeur de la propriété événements de pointeur.

Nous définissons la largeur et la position de la fenêtre modale sur la page. Nous définissons également un dégradé pour le fond et les coins arrondis.

Nous devons maintenant implémenter la fonctionnalité de fermeture de fenêtre. Formation de l'apparence du bouton :

Fermer (arrière-plan : #606061 ; couleur : #FFFFFF ; hauteur de ligne : 25 px ; position : absolue ; droite : -12 px ; alignement du texte : centre ; haut : -10 px ; largeur : 24 px ; décoration du texte : aucune ; police- poids : gras ; -webkit-border-radius : 12px ; -moz-border-radius : 12px ; border-radius : 12px ; -moz-box-shadow : 1px 1px 3px #000 ; -webkit-box-shadow : 1px 1px 3px #000 ; box-shadow : 1px 1px 3px #000 ; ) .close:hover ( arrière-plan : #00d9ff; )

Pour notre bouton, nous définissons l'arrière-plan et la position du texte. Ensuite, nous positionnons le bouton, l'arrondissons à l'aide de la propriété d'arrondi du cadre et formons une ombre légère. Lorsque vous passez votre souris sur le bouton, nous changerons la couleur d'arrière-plan.

Pour de nombreux internautes, le terme « fenêtre pop-up » évoque des associations négatives. Une image « flotte » immédiatement devant vos yeux montrant comment, en essayant de visualiser les informations nécessaires sur le site, ce reptile couvre le morceau de texte nécessaire. Ce qui est encore pire, c'est que si vous essayez de le fermer, l'utilisateur est souvent transféré vers une autre ressource.

Malgré cette mauvaise réputation, les pop-ups peuvent être à la fois utiles et ennuyeuses. Au départ, il ne s'agit que d'un type de boîtes de dialogue utilisées en programmation comme éléments de l'interface utilisateur.

Ils servent d'information et de moyen de dialogue entre l'utilisateur et le programme (application web). Mais malheureusement, une telle attitude négative de nombreux utilisateurs à l'égard des fenêtres contextuelles est largement justifiée, car sur Internet, elles sont principalement utilisées à des fins publicitaires.

• Ouverture au premier plan (pop-up) - pop-up au-dessus du principal ;
• Ouverture en arrière-plan (pop-under) - ouverte derrière la fenêtre principale.

Ces derniers sont les plus insidieux. Ils ne deviennent actifs et visibles par l'utilisateur qu'après la fermeture du principal. Il ne sera donc pas possible de déterminer leur source et de les bloquer à temps.

En raison de l'utilisation généralisée de publicités pop-up indésirables sur Internet, de nombreux développeurs de logiciels ont commencé à intégrer des contre-mesures dans leurs produits.

Le programme principal pour utiliser Internet est le navigateur. Par conséquent, la principale méthode de blocage des fenêtres publicitaires est mise en œuvre dans le navigateur :

• Internet Explorer a été le dernier de tous les produits logiciels à implémenter la possibilité de bloquer les publicités pop-up. Cela n'a été fait qu'en 2004 ;
• Opera - ce produit a été le premier navigateur au monde doté d'un bloqueur de pop-up intégré. Les fenêtres pop-up d'Opera peuvent être bloquées depuis 2000 ;
• Mozilla Firefox - Ce navigateur a amélioré l'approche de lutte contre la publicité mise en œuvre dans Opera. En revanche, dans Mozilla, toutes les publicités pop-up ne sont pas bloquées, mais uniquement celles qui sont chargées à l'ouverture de la fenêtre principale.

Dans les navigateurs modernes, le système de blocage des pop-ups est configuré via l'interface utilisateur. Chrome, comme la plupart des autres navigateurs, a la possibilité d'activer ou de désactiver le blocage, ainsi que de créer une liste d'exceptions (sites de confiance) :

En programmation Web, plusieurs technologies sont utilisées pour créer des fenêtres pop-up. Le principal moyen de les créer reste le javascript. Sa fonctionnalité comprend plusieurs types de boîtes de dialogue dont l'action est similaire à celle des fenêtres contextuelles :

• La méthode alert() affiche un message texte normal à l'écran. Pour masquer le dialogue après lecture, vous devez cliquer sur le bouton « Ok » en bas de la fenêtre ;
• La méthode confirm() est similaire à la méthode précédente. Mais la boîte de dialogue qu'il affiche, en plus de « Ok », est également équipée d'un bouton « Annuler ». Avec leur aide, l'utilisateur peut accepter ou refuser la condition précisée dans la fenêtre ;
• La méthode prompt() est utilisée pour appeler un autre type de fenêtre contextuelle javascript. Contrairement à celles citées ci-dessus, cette fenêtre est également équipée d'un champ de texte. L'utilisateur peut y saisir des données textuelles, qui peuvent être affectées à la valeur de la variable souhaitée.

L'action des trois méthodes et les types de dialogue qu'elles appellent sont montrés dans l'image :

Mais ce ne sont que des types de dialogues. Pour créer une véritable fenêtre popup en javascript, vous utilisez la méthode open() de l'objet window.

Voici la syntaxe complète de la méthode :

gagner = fenêtre. open (url, nom, paramètres) , où :

• url est l'adresse de la page qui s'ouvrira dans une nouvelle fenêtre ;
• Nom – le nom de la fenêtre créée. Peut être utilisé pour un traitement ultérieur dans les formulaires (paramètre cible) ;
• Params – une chaîne de paramètres pour la nouvelle fenêtre. Vous pouvez découvrir vous-même leur liste complète dans la documentation javascript.

L'image ci-dessous montre la méthode en action et fournit un script contextuel simplifié :

Une fonction f1 est créée dont le corps implémente un appel à la fenêtre. ouvrir() . Ensuite cette méthode est appelée avec un paramètre indiquant l'adresse de la page qui s'ouvrira dans la fenêtre créée. Après cela, la méthode setTimeout() est appelée. La fonction f1 et l'intervalle de temps après lequel une nouvelle fenêtre s'ouvrira lui sont passés en paramètres.

Vous pouvez également créer une popup en CSS. Cette fonctionnalité n'a été réalisée qu'avec la sortie de la troisième version de cette technologie. N'abusez pas de cette option, car elle ne fonctionnera que dans les versions les plus récentes des navigateurs :

Comme vous pouvez le voir sur l'image, une telle fenêtre modale a été créée en utilisant CSS et HTML. Contrairement à celles créées avec js, cette fenêtre contextuelle ne peut pas être déplacée sur la page. De plus, son code est trop lourd à décrire dans le cadre de cet article. Mais une telle fenêtre ne sera pas bloquée par le navigateur.

Il n’est pas du tout nécessaire de développer soi-même une fenêtre pop-up. De nos jours, de nombreux plugins jquery gratuits ont été créés à cet effet. En connectant l'un d'eux, vous obtiendrez une fenêtre terminée.

Il existe également de nombreux plugins pour les CMS populaires. Ils peuvent inclure tout un ensemble de fenêtres. La conception et les fonctionnalités de chacun d'eux sont « adaptées » pour effectuer une tâche spécifique (inscription, envoi d'un message, etc.).

Il existe également plusieurs scripts populaires. Un exemple de l’un d’entre eux sera donné ci-dessous. Les fenêtres pop-up de Contact et d'autres réseaux sociaux populaires fonctionnent sur ce principe :