Souvent, lors de la création d’un site Web, vous souhaiterez peut-être présenter à l’utilisateur des informations importantes dans une deuxième fenêtre contextuelle; cependant, il est important de comprendre comment configurer correctement sa taille de pop-up HTML.
Table des matières
Définition de la taille du pop-up HTML d’une fenêtre
Vous pouvez utiliser plusieurs méthodes différentes pour générer une fenêtre contextuelle pour votre site Web. Chaque méthode a ses avantages et ses inconvénients, alors considérez-les attentivement avant d’en choisir une. La taille de la fenêtre dans chaque cas est généralement la même, mais l’emplacement dans votre code HTML où elle est définie sera différent. Les deux méthodes d’ouverture d’une nouvelle fenêtre utilisent soit Javascript, soit ne pas utiliser Javascript.
Utiliser Javascript avec un formulaire
La technique la plus courante que les webmasters utilisent pour générer une fenêtre contextuelle est via Javascript. Javascript est un langage de script flexible qui vous permet de traiter les interactions de l’utilisateur via un script qui s’exécute directement sur le navigateur de l’utilisateur, plutôt que sur le serveur Web. Cela permet des changements d’écran et un formatage très rapides et dynamiques en fonction des sélections de l’utilisateur.
Vous générez un fenêtre pop-up en Javascript en utilisant la méthode window.open. Cependant, ce qui distingue la technique Javascript, c’est que la méthode open () s’exécute dans le code Javascript, défini dans votre code HTML dans les balises « script ».
Dans une forme, vous programmez un bouton pour ouvrir une nouvelle fenêtre comme suit.
Lorsque l’utilisateur clique sur le bouton formulaire, la fonction « myWindow » dans le Javascript est exécutée, qui utilise la méthode « windows.open » pour lancer une nouvelle fenêtre.
le Fenêtre.Ouvrir méthode est utilisée dans toutes les techniques pour ouvrir une fenêtre contextuelle. Ainsi, les propriétés utilisées avec cette méthode déterminent à quoi ressemblera la fenêtre contextuelle, y compris sa taille.
Les propriétés Window.Open incluent:
- Plein écran – Sélectionne si la nouvelle fenêtre sera affichée en plein écran ou non
- la taille– Détermine la hauteur du pop-up en pixels
- Largeur – Détermine la largeur du pop-up en pixels
- La gauche – Distance du côté gauche de l’écran en pixels
- Haut – Distance du haut de l’écran en pixels
- Statut – Afficher ou non une barre d’état supérieure
- Redimensionnable – Autoriser ou non l’utilisateur à redimensionner la nouvelle fenêtre
- Dépendant – Cela fermera le pop-up si la fenêtre qui l’a lancé se ferme
Utiliser Javascript avec un lien hypertexte
Comment activer Javascript
Une autre technique de pop-up utilisant javascript est lorsque vous utilisez un lien hypertexte, plutôt qu’un formulaire, et que vous voulez que le lien hypertexte lance une fenêtre pop-up. Ceci est accompli à peu près de la même manière que l’exemple de formulaire ci-dessus, sauf qu’au lieu d’un bouton de formulaire lançant la fonction Javascript « myWindow », l’hyperlien le fait.
Encore une fois, les paramètres de taille sont configurés de la même manière. Cette approche vous permet d’utiliser la même fonction «myWindow» avec chaque lien hypertexte avec lequel vous souhaitez créer une fenêtre contextuelle. Tout ce que vous avez à faire est de lui transmettre l’URL.
Utilisation d’un lien hypertexte «réel»
Le plus gros problème avec l’utilisation de Javascript pour gérer les fenêtres pop-up est que beaucoup de gens veulent faire un clic droit sur un lien hypertexte et ouvrir le lien dans une nouvelle fenêtre. Si vous utilisez la méthode ci-dessus dans laquelle le lien hypertexte est en fait un appel de fonction Javascript, si l’utilisateur tente d’ouvrir le lien en cliquant dessus avec le bouton droit, il se retrouvera avec une page vierge.
En raison de ce problème, la meilleure approche pour ouvrir une fenêtre contextuelle avec un lien hypertexte consiste à utiliser la méthode d’ouverture de fenêtre dans le cadre de la balise « href », tout en conservant également l’adresse du site Web dans la balise. Cette technique est illustrée ci-dessous.
En utilisant le code ci-dessus, votre page sera beaucoup plus propre et efficace. Le lien hypertexte reste un « vrai » lien hypertexte, mais il utilise également « window.open » pour créer la fenêtre pop-up, avec les paramètres de taille définis dans la même balise « href ».
Considérations relatives à la taille de la fenêtre contextuelle
Les facteurs importants à prendre en compte lorsque vous définissez les paramètres de longueur et de largeur d’une fenêtre contextuelle incluent l’emplacement de la fenêtre et la mise en forme du contenu. Le placement de votre fenêtre pop-up est défini par les propriétés « top » et « left ». Si la fenêtre est placée suffisamment loin vers le haut et la gauche de l’écran, vous aurez plus d’espace pour ouvrir une fenêtre plus grande. S’il est plus proche du bas ou de la droite, vous devrez dimensionner la fenêtre en conséquence. Deuxièmement, chaque fois que vous déterminez la taille de la fenêtre contextuelle HTML d’une fenêtre, considérez attentivement l’apparence du contenu dans une fenêtre beaucoup plus petite. Lorsque vous écrivez la page qui s’affichera dans la fenêtre contextuelle, mettez-la toujours en forme avec les paramètres de taille que vous prévoyez de définir. Cela garantira que la fenêtre contextuelle sera professionnelle, propre et correctement dimensionnée.
Plus d’information
Pour plus d’informations sur le codage Web, consultez les articles Supportivy suivants.
Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !
