Comment créer une fenêtre pop-up ? Comment créer vos propres pop-ups

Bonjour les amis ! Dans cet article, nous verrons comment créer vous-même une fenêtre Pop Up et l'installer sur votre blog. Cet événement augmentera la collection d’abonnés de votre blog.

Tout le monde peut créer une fenêtre Pop Up

Dans l'article d'aujourd'hui, nous parlerons des fenêtres dites Pop Up, qui sont utilisées sur de nombreux sites et blogs. En russe, on les appelle des pop-ups. Pop Up est une fenêtre qui apparaît automatiquement en haut d'une page Web. Vous avez sûrement rencontré à plusieurs reprises des fenêtres pop-up similaires lors de la visite de certains sites Web et blogs.

Les fenêtres pop-up peuvent s'ouvrir immédiatement lorsque vous arrivez sur un blog, elles peuvent s'ouvrir au milieu de la navigation ou elles peuvent apparaître lorsque vous fermez la page. Les fenêtres pop-up profitent au propriétaire d'un site Web ou d'un blog, obligeant essentiellement le lecteur à s'abonner ou à accéder à la page de vente. Naturellement, les fenêtres pop-up irritent les visiteurs de ces ressources.

Dans le même temps, les statistiques montrent que les fenêtres pop-up augmentent fortement les abonnements et surtout les ventes, et augmentent les revenus via Internet. Il n'est pas surprenant qu'un blog sur trois dispose d'un tel outil. Les moteurs de recherche ont une attitude négative envers les fenêtres Pop Up. Par conséquent, il est tout simplement impossible de les installer sur de jeunes blogs, sinon un tel blog ne passera jamais au sommet, ni même ne tombera sous le filtre. Autrement dit, les fenêtres Pop Up ont des avantages et des inconvénients, leur installation doit donc être abordée avec soin.

Supposons que votre blog ait déjà pris du poids, gagné en autorité auprès des moteurs de recherche, et que vous décidiez d'installer une fenêtre Pop Up sur votre blog. Il y a ici deux options : commander l'installation d'une fenêtre Pop Up en freelance, ou effectuer ce travail vous-même. Le freelance fera tout pour vous, mais cela coûte de l'argent, mais vous pouvez faire ce genre de travail vous-même.

Vous pouvez créer une fenêtre Pop Up à l'aide d'un modèle prêt à l'emploi. Le modèle peut être refait au-delà de toute reconnaissance, qui contiendra uniquement les informations dont vous avez besoin et aura le design souhaité. Tout cela est facile à faire. Si vous avez créé vos pages d'abonnement à l'aide de modèles, le processus ici est très similaire. Mais il y a aussi une différence. Pour créer une fenêtre pop-up, vous devez utiliser le service en ligne gratuit Pop in Builder. Pour accéder à la page du service spécifié, vous pouvez spécifier Pop in Builder dans la barre de recherche de votre navigateur. Ou suivez ce lien http://popinbuilder.icoder.com/ le service est gratuit et ne nécessite pas d'inscription.

Le but du travail est le suivant : d'abord, vous prenez un modèle, modifiez les entrées (son code) dans un bloc-notes classique ou NotePad++, téléchargez des images sur l'hébergement (blog), puis modifiez la fenêtre Pop Up dans le service Pop in Builder. et récupérez le code html. Collez le code obtenu sur votre blog. Cela semble difficile, mais cela semble seulement, en fait, tout est très simple et facile. Bien sûr, il sera difficile d'effectuer un tel travail selon ma description, mais vous pouvez télécharger un didacticiel vidéo gratuit, où toutes les actions sont présentées en détail. Vous pouvez télécharger la leçon « Créer une fenêtre contextuelle à la sortie de la page » en suivant le lien.

Vous pouvez créer votre propre fenêtre Pop Up individuelle à votre discrétion, y refléter les informations nécessaires et, avec le temps, cela prendra entre une heure et une heure et demie. Si vous décidez d'installer une fenêtre Pop Up, allez-y et faites-le.

Sur les pages du blog, j'ai déjà raconté comment ils présentaient des informations sur la fabrication d'une bannière publicitaire, ils disaient que c'était difficile, il fallait commander uniquement auprès de spécialistes. Mais rappelez-vous que même un enfant peut réaliser une bannière publicitaire, et en quelques minutes seulement, vous pouvez voir les articles »

26/09/14 23K

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.

Vos fenêtres pop-up sont-elles si salaudes ?

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) - s'ouvre 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.

Moyens de lutte

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) :

Créer des popups en utilisant javascript

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.

Créer une fenêtre contextuelle à l'aide de CSS

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.

Examen d'autres technologies

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 :

Comment créer une fenêtre contextuelle dans Jquery $(document).ready(function())( PopUpHide(); )); function PopUpShow())( $("#window-popup").show(); ) function PopUpHide())( $("#window-popup").hide(); ) .box ( largeur : 400px; hauteur : 300px ; couleur d'arrière-plan : #ccc ; remplissage : 10px ; couleur : #fff ; caché ; position : fixe ; top : 0px ; ) .popup .popup-content (marge : 40px auto ; largeur : 200px ; hauteur : 80px ; remplissage : 10px ; couleur : #c5c5c5 ; rayon de bordure : 5px ; ombre de la boîte : 0px 0px 10px #000 ;
Afficher la fenêtre contextuelle Félicitations, vous avez créé une popup !!! Masquer la fenêtre contextuelle

Le code est donné dans la version « pour les paresseux ». En le collant dans n'importe quel éditeur et en l'exécutant, vous obtiendrez un exemple prêt à l'emploi de fenêtre contextuelle basée sur jquery.

Dans cet article, Anthony Wood vous expliquera comment réaliser des bouillettes pop-up. Vous découvrirez de quoi ils étaient faits auparavant et quels composants sont nécessaires maintenant. Anthony Wood dit...

On m’a demandé à plusieurs reprises d’écrire un article sur la création d’appâts flottants car ils sont peu nombreux ou très anciens. Et maintenant, j'ai enfin trouvé le temps...

Un peu d'histoire...

Par où commencer ? Tout d'abord, laissez-moi vous dire que dans les années 80, le mélange pour bouillettes flottantes n'était pas compliqué : 2 onces (1 oz ~ 28,3 g) de caséinate de sodium, 2 onces de caséinate de calcium, 1 once d'isolat de soja, 1 gros œuf et 10 ml d'arôme. C'était un bon pop-up protéiné.

Aujourd’hui, les protéines du lait sont devenues très chères et les gens ont commencé à expérimenter et à chercher d’autres façons de les préparer. La première idée était d'envelopper les boules de mousse dans une fine couche de mélange à bouillette pour faire flotter l'appât.

Envelopper des boules de liège dans de la pâte à bouillette est désormais également l'une des méthodes populaires pour fabriquer des appâts flottants. Personnellement, je n'aime pas cette idée car si nous manquons le poisson avec l'appât, ou si l'appât se détache des poils, cela peut causer des problèmes intestinaux au poisson. Bien que ce soit un événement rare.

Une autre façon de fabriquer un appât flottant consiste à prendre votre mélange de bouillettes habituel et à le jeter au micro-ondes au lieu de simplement le faire bouillir dans la casserole. Oui, vous obtiendrez une buse flottante, mais les résultats varieront, car il n'y a pas de compréhension claire de la durée pendant laquelle la buse restera flottante.

Ajoutez environ 30 bouillettes de 14 mm et allumez le feu à puissance maximale. Éteignez après 2 minutes. Après deux minutes, examinez attentivement les bouillettes à la recherche de signes de brûlure. Si l'extérieur est normal, allumez pendant encore 15 secondes. Examinez à nouveau vos pièces jointes et continuez à ces intervalles de 15 secondes jusqu'à ce que vous remarquiez de légers signes de brûlure. Cela signifie que vous avez évaporé presque toute l'eau de la buse. Maintenant, elle va nager. Plus vous utilisez le micro-ondes longtemps, plus les accessoires flotteront mieux. Si vous souhaitez réaliser des accessoires de plus de 14 mm, augmentez simplement un peu les délais (par exemple, de 15 secondes à 20) et expérimentez.

Une autre astuce est que plus le mélange contient de produits à base de lait, comme la caséine, plus la bouillette nagera mieux.

Une autre façon de fabriquer des bouillettes flottantes consiste à acheter un mélange flottant prêt à l'emploi auprès de bons fabricants (par exemple, Mainline Baits Polaris ou un mélange pop-up de Richworth/CC Moore). Tous ces mélanges sont de grande qualité et vous ferez de bons appâts. Un petit conseil : pour 4 cuillères à soupe de mélange, ajoutez une cuillère à soupe d'albumine d'œuf. Cela permettra à votre mélange de bien couler.

Alors maintenant, nous allons faire un pop-up mix. Mon mélange pop-up préféré... avec des miettes de liège. Le seul bémol est que lors de la préparation de bouillettes avec des miettes de liège, ne partez pas du poids, mais du volume. Je fais toujours un mélange à base d'un œuf.

De quoi avons-nous besoin ?

• 2 tasses de chapelure de liège
• 1 tasse de mélange de base (c'est-à-dire un mélange pour bouillettes coulantes)
• 1/2 tasse d'albumine d'œuf (très important car l'albumine aide à lier le mélange et les bouillettes roulent bien)
• 1 gros oeuf
• 5g de sorbate de potassium dissous dans 10ml d'eau tiède (un conservateur qui augmente la durée de conservation des bouillettes)
• 5 ml d'arôme concentré
• 1 cuillère à café de colorant

Si vous utilisez d'autres ingrédients, tels que du sel, du fructose, de la levure de bière, ajoutez-les au mélange de base et prenez un verre du mélange de base en tenant compte des composants ajoutés.

Mélangez tous les ingrédients secs. Il est préférable de tout verser dans un sac en plastique et de bien mélanger.

Maintenant, battez l'œuf et ajoutez les ingrédients liquides (sorbate de potassium et arôme) et le colorant. Remuer. Ajoutez progressivement le mélange en vrac en mélangeant le tout jusqu'à obtenir une pâte qui ne colle pas aux mains.

Chargez la pâte dans le pistolet et réalisez des boudins du diamètre souhaité. Étalez-les sur une planche et obtenez des appâts ronds et uniformes. Sinon, faites rouler les boules à la main.

Faites cuire 30 bouillettes pendant 2 minutes.

Laissez-les sécher pendant 48 heures, après quoi vous pourrez les emballer dans un contenant hermétique.

N'oubliez pas que les bouillettes flottantes deviennent moins efficaces en eau profonde. Plus le lieu de pêche est profond, plus votre appât se détachera du fond. A plus de 3 mètres de profondeur, la buse commence à perdre progressivement ses qualités de flottabilité et dès qu'elle atteint 9 mètres, elle devient inutile.

J'espère que vous avez aimé ce matériel. Si vous souhaitez en savoir plus, vous pouvez acheter un des livres d'Anthony Wood sur le site

Comment créer une fenêtre pop-up est une question qui hante l'esprit de tout jeune programmeur novice. Et aujourd'hui, nous allons voir comment créer cette fenêtre pop-up. Je vais prendre un peu d'avance, car ce que nous allons faire sera vraiment très, très intéressant et fonctionnel.

Nous allons donc créer une fenêtre similaire à celle que j'ai implémentée sur le site internet d'un de mes clients. Vous pouvez jeter un oeil. L'énorme avantage de cette méthode de création d'une telle fenêtre est que nous n'utiliserons pas JavaScript, mais nous limiterons exclusivement à mes CSS3 et HTML5 préférés. De cette façon, nous ferons d’une pierre plusieurs coups. Premièrement, nous faciliterons le chargement de notre site, et deuxièmement, nous mettrons tout en œuvre sous une forme pratique et simple avec une utilisation minimale de code, ce qui vous permettra de donner indépendamment à votre fenêtre contextuelle n'importe quelle taille, couleur, forme. Je pense que c'est génial. Alors commençons.

Imaginez que vous possédez déjà un site Web et que vous souhaitez implémenter un bouton quelque part, par exemple « inscription » ou « candidature en ligne ». Et vous souhaitez que l'utilisateur clique sur ce bouton pour voir une petite fenêtre qui lui permet d'y saisir quelques données puis de les envoyer à l'administrateur du site. C'est la fenêtre que nous allons réaliser maintenant.

Pour commencer, nous allons créer ce bouton, je pense que vous pouvez le faire sans trop de difficultés. Mais dans l'étiquette Vous devez saisir le #openModal suivant . Voilà à quoi cela devrait ressembler pour vous. Ensuite, avant la balise fermante écrivez le code ci-dessous. Veuillez noter que nous utiliserons des classes pour la décoration et un identifiant pour appeler la fenêtre. En suivant cette règle, nous pouvons créer d’innombrables fenêtres pop-up différentes.

X Fenêtre contextuelle

Cette fenêtre est créée de l'une des manières les plus simples. Rien de personnel, tout est simple :)

Nous devons maintenant tout concevoir magnifiquement et nous assurer que tout fonctionne comme il se doit. Commençons par décorer.

Inscription

ModalDialog ( position : fixe ; famille de polices : Arial, Helvetica, sans-serif ; haut : 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; arrière-plan : rgba(0,0,0,0.8) ; z-index : 99999 ; -webkit-transition : opacité 400 ms facilité d'entrée ; -moz-transition : opacité 400 ms facilité d'affichage : aucun ;

Boîte de dialogue modale ( poste : fixe ; famille de polices : Arial, Helvetica, sans-serif ; haut : 0 ; à droite : 0 ; bas : 0 ; gauche : 0 ; arrière-plan : rgba(0, 0, 0, 0,8) ; indice z : 99999 ; Webkit - transition : opacité 400 ms facilité d'entrée ; Transition Moz : opacité 400 ms, entrée facile ; transition : opacité 400 ms facilité d'entrée ; affichage : aucun ; pointeur - événements : aucun ;

Le code ci-dessus est simple comme bonjour. Mais au cas où, puisque je sais que mon blog est lu par pas mal de nouveaux arrivants, j'analyserai d'éventuelles difficultés. Pour que la fenêtre soit toujours au même endroit, je lui ai donné une position fixe. De plus, pour étendre la fenêtre sur tout l'écran, j'ai défini les coordonnées des coins au point 0. La couleur d'arrière-plan a été définie sur noir et de la transparence a été ajoutée, obtenant ainsi de l'obscurité autour de la fenêtre modale. Pour vous assurer que la fenêtre est au-dessus du reste des éléments de la page, définissez-la sur grande indice z. Pour l'apparition et la disparition en douceur de notre fenêtre modale préférée, et cela deviendra comme ça, croyez-moi, transition. Pour masquer la fenêtre, vous devez définir afficher V aucun. Propriété événements de pointeur permet de contrôler l'interactivité (cliquabilité) des éléments.

Ouvrir une fenêtre pop-up

Nous avons décoré notre fenêtre. Mais! Ça, me direz-vous, ça ne marche pas. Oui, je réponds, c'est vrai. Parce que c'est maintenant la partie amusante. CSS3 a introduit une pseudo-classe cible, une chose vraiment utile, quoi qu'on en dise. Et dans notre fenêtre contextuelle modale, il n'y a absolument aucun moyen de s'en passer. Qu'est-ce que ça fait ? Cette pseudo-classe, si elle est spécifiée avec un élément défini dans la barre d'adresse comme id, dans notre cas c'est #openModal. Ensuite, les propriétés de cette pseudo-classe deviendront plus importantes que celles de l’élément cible. Je pense que vous comprenez déjà ce que je veux faire.

ModalDialog:target ( display: block; pointer-events: auto; ) .modalDialog > div ( width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: # fff ; arrière-plan : -moz-linear-gradient(#fff, #999) ; arrière-plan : -webkit-linear-gradient(#fff, #999) ; )

ModalDialog : cible ( affichage : bloc ; événements de pointeur : auto ; Dialogue Modal > div ( largeur : 400 px ; position : relative ; marge : 10 % automatique ; remplissage : 5px 20px 13px 20px ; rayon de bordure : 10px ; arrière-plan : #fff; fond : - moz - linéaire - dégradé (#fff, #999) ; background : - webkit - linéaire - dégradé (#fff, #999) ; fond : - o - linéaire - dégradé (#fff, #999) ;

Pseudo-classe cible définit DISPLAY sur BLOCK et ainsi la fenêtre apparaît. La propriété POINTER-EVENTS contrôle l'activité du lien.
La propriété DIV définit la largeur de la fenêtre, sa position sur l'écran et le remplissage pour placer la fenêtre au centre de la page. Les propriétés restantes définissent les marges à l'intérieur de la page, l'arrondi des coins et l'arrière-plan de la fenêtre avec des dégradés du blanc au gris foncé.

Fermer une fenêtre modale

Lorsque la conception de la fenêtre est définie et qu'elle s'ouvre, vous devez créer un bouton pour fermer la fenêtre - la concevoir et implémenter la fonctionnalité. L'utilisation de CSS3 et HTML5 vous permet de créer des boutons personnalisés élégants sans utiliser d'images :

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 ; -moz-box-shadow : 1px 3px #000 ; :survol ( arrière-plan : #00d9ff; )

Fermer( arrière-plan : #606061 ;