Les fenêtres contextuelles pour une grande variété d'objectifs ont de nombreuses utilisations dans la construction Web. Ils peuvent être utilisés pour créer divers types de menus, placer des textes et graphiques publicitaires, des info-bulles lors du remplissage de formulaires complexes, et il est pratique de placer les formulaires eux-mêmes dans des fenêtres qui ne prennent pas de place sur la page. Dans notre article, vous trouverez une description de la façon dont vous pouvez créer une telle fenêtre.
Il est nécessaire
Connaissances de base en HTML
Instructions
Étape 1
popup, html, couche cachée
Étape 2
Sur de nombreuses pages du Web, vous pouvez voir que des bibliothèques sophistiquées de divers frameworks JavaScript (jQuery, MooTools, Prototype, etc.) sont utilisées pour créer des fenêtres contextuelles dans les pages. Cependant, en fait, ils ne sont pas nécessaires pour résoudre ce problème particulier. Les outils disponibles dans Hypertext Markup Language (HTML) et Cascading Style Sheets (CSS) sont suffisants pour créer des pop-ups. Les fenêtres ainsi créées fonctionneront, que JavaScript soit activé ou non dans le navigateur du visiteur.
Tout le code qui crée le popup peut être placé sur deux lignes. La première ligne crée un lien sur lequel il faut cliquer pour afficher la popup:
Cliquez ici!
Ici, l'attribut onmouseover de la balise link définit le type de curseur de souris par défaut pour les liens. L'attribut onclick spécifie que lorsque le lien est cliqué, le bloc PopUp caché doit devenir visible.
La deuxième ligne est en fait la fenêtre contextuelle. Couche avec l'identifiant PopUp et la taille de la fenêtre, la couleur et la taille du texte, l'arrière-plan et la bordure spécifiés dans l'attribut style:
C'est le texte dans la popup
Il n'est pas visible par défaut - ceci est indiqué par le sélecteur d'affichage avec une valeur de none dans la description du style de calque.
En fait, c'est tout ce dont vous avez besoin pour créer une fenêtre pop-up - placez ces deux lignes entre les balises et votre page et c'est prêt.
Étape 3
Pour pouvoir fermer la fenêtre pop-up devant la balise, vous devez ajouter un lien qui effectue l'action inverse - masquer la couche visible avec l'identifiant PopUp:
Fermer
Étape 4
Et si vous voulez que la fenêtre s'ouvre non pas en cliquant, mais en passant le curseur de la souris, alors la première ligne avec le lien doit être modifiée de cette façon:
déplacez la souris ici !
Étape 5
Vous connaissez maintenant le principe et la structure du code de la fenêtre pop-up, et la conception de son apparence et de son contenu dépend entièrement de vos objectifs et de votre imagination.
