Créez une fenêtre de démonstration en utilisant HTML. Comment créer une fenêtre modale en CSS. Fenêtre modale en cliquant sur un bouton

est désormais responsable de l'affichage de la fenêtre modale et de l'assombrissement du fond de la page, et l'enfant est uniquement responsable de la décoration de la fenêtre elle-même :

Fenêtre contextuelle d'appel

Essayer "

Remarque : si vous souhaitez que l'utilisateur voie immédiatement une fenêtre contextuelle lorsqu'il entre dans la page (et ne l'appelle pas via un lien), alors l'adresse de la page devra être saisie avec l'identifiant de la fenêtre (par exemple, l'adresse peut ressemble à ceci : site.ru/papka/documet html#window).

Les fenêtres modales sont un outil fréquemment utilisé dans l'arsenal d'un webmaster. Il est très bien adapté pour résoudre un grand nombre de tâches, telles que l'affichage de formulaires d'inscription, de blocs publicitaires, de messages, etc.

Mais, malgré leur place importante dans le support informationnel du projet, les fenêtres modales sont généralement implémentées en JavaScript, ce qui peut créer des problèmes lors de l'extension des fonctionnalités ou de la garantie d'une compatibilité ascendante.

HTML5 et CSS3 facilitent incroyablement la création de fenêtres modales.

Balisage HTML

La première étape vers la création d’une fenêtre modale est un balisage simple et efficace :

Ouvrir la fenêtre modale

À l'intérieur d'un élément div Le contenu de la fenêtre modale est placé. Vous devez également fournir un lien pour fermer la fenêtre. Par exemple, plaçons un titre simple et plusieurs paragraphes. Le balisage complet de notre exemple ressemblerait à ceci :

Ouvrir la fenêtre modale

Styles

Créer une classe modalDialog et commencez à façonner l'apparence :

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 ;

Notre fenêtre aura une position fixe, c'est-à-dire qu'elle descendra si vous faites défiler la page avec la fenêtre ouverte. De plus, notre fond noir s'étendra pour remplir tout l'écran.

L'arrière-plan aura une légère transparence et sera également placé au-dessus de tous les autres éléments grâce à l'utilisation de la propriété indice z.

Enfin, nous définissons les transitions pour afficher notre fenêtre modale et la masquons dans un état inactif.

Peut-être que vous ne connaissez pas la propriété événements de pointeur, mais il vous permet de contrôler la façon dont les éléments réagiront aux clics de souris. Nous définissons la valeur à sa valeur pour la classe modalDialog, puisque le lien ne doit pas répondre aux clics de souris lorsque la pseudo-classe est active ":cible".

Maintenant, nous ajoutons une pseudo-classe :cible et les styles pour la fenêtre modale.

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

Pseudo-classe cible change le mode d'affichage de l'élément, donc notre fenêtre modale sera affichée lorsque le lien sera cliqué. 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.

Fermer la fenêtre

Nous devons maintenant implémenter la fonctionnalité de fermeture de fenêtre. Former 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 ; -moz-box-shadow : 1px 3px #000 ; :survol ( 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.

De nos jours, pour divers sites, toutes sortes de fenêtres modales pop-up - popups - pour l'enregistrement, l'autorisation, les fenêtres d'information - de toutes sortes de formes et de tailles sont devenues la norme. Il existe également un grand nombre de plugins, en plus de jQuery. , pour une création simple et pratique de telles popups - la même Shadowbox, par exemple.

L'apparence, la taille et le design de ces pop-ups sont complètement différents - avec une superposition, des ombres, des animations - on ne peut pas tout compter. La seule chose qu'ils ont en commun est peut-être le fait qu'ils sont généralement affichés au centre même de la page - à la fois horizontalement et verticalement. Et ce centrage se fait à l'aide de JS. Je n'entrerai pas dans le détail de ces calculs, je ne les décrirai que brièvement :

Le code HTML d'une popup a généralement la structure suivante :

-- Popup avec du contenu -->

Et CSS ( ici et ci-dessous, j'omettrai délibérément d'écrire certaines propriétés qui ne sont nécessaires que pour certains navigateurs et leurs versions, ne laissant que les plus basiques):

Popup__superposition (
poste : fixe ;
gauche : 0 ;
haut : 0 ;
arrière-plan : #000 ;
opacité : 0,5 ;
filtre : alpha(opacité=50 );
indice z : 999
}
.surgir(
position : absolue ;
largeur : 20 % ;
indice z : 1000 ;
bordure : 1px solide #ccc ;
fond : #fff
}

JS détermine le navigateur et la version du navigateur, et sur cette base, il calcule les dimensions de l'espace de travail et les dimensions de la fenêtre contextuelle elle-même (si elles ne sont pas spécifiées), puis des calculs simples sont effectués pour la position de son coin supérieur gauche ( propriétés CSS à gauche et en haut pour .popup). De nombreux plugins réagissent également au redimensionnement des pages, en recalculant le tout à chaque fois pour que le popup se situe exactement au centre de l'espace de travail.

Je suis perfectionniste par nature (je sais, parfois c'est une mauvaise chose), et je m'inquiète souvent même des petits détails, essayant d'améliorer et d'ajouter le maximum d'extensibilité possible à ces détails, et je ne pouvais m'empêcher d'être accro à cela point particulier dans le travail de tous ces plugins. L'idée est née que tout le travail de positionnement d'une fenêtre contextuelle peut être transféré des épaules de JS vers les épaules du navigateur lui-même, c'est-à-dire que ce travail peut être effectué en utilisant CSS.

C'est ce que nous ferons.

Ci-dessous, je vais donner un exemple de popup qui fonctionne dans toutes les versions majeures des principaux navigateurs. Pour que cela fonctionne correctement dans IE<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

Ainsi, nous avons une page avec un bouton qui, lorsque vous cliquez dessus, devrait ouvrir une fenêtre modale avec des informations, et tout autre contenu devrait être masqué par une superposition.

Tout d'abord, le code HTML. Sa structure sera légèrement différente du code indiqué ci-dessus, pourquoi - nous en parlerons plus loin dans l'article ; les classes d'éléments resteront les mêmes :

< div class ="popup__overlay">
< div class ="popup">

Et du CSS :

Popup__superposition (
poste : fixe ;
gauche : 0 ;
haut : 0 ;
largeur : 100 % ;
hauteur : 100 % ;
indice z : 999
}
.surgir(
}

Tailles fixes

L'option la plus simple. Il n'est pas nécessaire d'inventer quelque chose de nouveau :

Surgir (
gauche : 50 % ;
haut : 50 % ;
largeur : 400 px ;
hauteur : 200px ;
marge-gauche : -200px ;
marge supérieure : -100px
}

Les marges négatives de la moitié de la largeur et de la hauteur sont banales et ennuyeuses, cela n'a rien d'original. Passons à autre chose.

La taille des popups dépend du contenu

Premièrement – ​​l’alignement horizontal – cela semble plus facile. Si la popup a une largeur fixe, alors ce qui suit sera suffisant :

Surgir (
marge : automatique
}

Cela n'affectera en rien l'alignement vertical et, soit dit en passant, si seul l'alignement horizontal vous suffit, vous pouvez vous arrêter là, en spécifiant une autre marge supérieure de la fenêtre contextuelle. Mais cela ne nous suffit pas ! Passons à autre chose.

Alignement vertical. C'est là que ça devient intéressant. Bien sûr, une table ou une émulation de table utilisant display: table & display: table-cell pourrait gérer cette tâche sans aucun problème, mais faire fonctionner cela dans un ancien IE est plus coûteux. Le tableau disparaît également – ​​pour des raisons évidentes.

Ainsi, la marge n’est plus nécessaire – nous ne connaissons pas les tailles. Rappelons quelles propriétés ont des effets similaires. Oui, alignez le texte. Mais uniquement pour les éléments en ligne. D'ACCORD. Il semble que Dieu lui-même ait ordonné l'utilisation de display : inline-block - un élément de bloc auquel les propriétés des éléments en ligne pourraient être appliquées. Avec la prise en charge de cette propriété dans tous les navigateurs, tout est également en ordre. Le code devient quelque chose comme ceci :

Popup__superposition (
poste : fixe ;
gauche : 0 ;
haut : 0 ;
largeur : 100 % ;
hauteur : 100 % ;
indice z : 999 ;
alignement du texte : centre
}
.surgir(
affichage : bloc en ligne ;
alignement vertical : milieu
}

Ce qui reste, c'est l'alignement vertical - l'alignement vertical fera l'affaire pour nous. Dans toute autre situation, il serait également approprié d'utiliser la hauteur de ligne, mais comme nous n'avons pas de hauteur de page fixe (hauteur de ligne dans ce contexte), elle ne peut pas être utilisée ici. Une astuce qui vient à la rescousse est l’alignement vertical d’éléments de tailles inconnues. Je me souviens exactement avoir trouvé cette méthode sur Habré, mais malheureusement je n'ai pas trouvé de lien vers ce sujet. Cette méthode comprend les éléments suivants : un élément inline-block de largeur nulle et de 100 % de hauteur du parent est ajouté, ce qui « étend » la hauteur de ligne à 100 % de la hauteur du parent, c'est-à-dire à la hauteur de la zone de travail de la page. zone. Rendons cela plus élégant - au lieu de balisages inutiles, nous utiliserons des pseudo-éléments :

Popup__overlay :après (
affichage : bloc en ligne ;
largeur : 0 ;
hauteur : 100 % ;
alignement vertical : milieu ;
contenu : ""
}

Il ne reste plus qu'à ajouter une gradation translucide de la superposition - rgba s'en chargera. Tous! Désormais, la position du popup est contrôlée uniquement par les outils du navigateur au niveau CSS.

Encore une fois, j'aborde le sujet de la création de fenêtres modales (pop-up). Dernièrement, je m'intéresse de plus en plus à diverses techniques permettant d'exécuter des fenêtres pop-up, sans utiliser de javascript, de plugins jQuery, etc. La possibilité d’utiliser des styles épurés et le potentiel infini des nouvelles fonctionnalités CSS3 sont plus intéressants.

Basés sur les développements de certains bourgeois respectés, ce sont des gars rusés à cet égard, ils obtiennent de bons résultats en termes de création de fenêtres modales en utilisant CSS3. La tâche est tout d'abord d'obtenir une compatibilité plus ou moins stable entre navigateurs du résultat final, et bien sûr, avec le moins de pertes, de réduire la quantité totale de code, tant en HTML qu'en CSS, afin de faciliter la vie des travailleurs qui souffrent depuis longtemps dans la création de sites Web.
Ce qui se passe au final, je l'ai à cet égard aujourd'hui, nous le verrons, et en même temps, nous apprendrons comment créer des fenêtres modales pop-up en utilisant la « magie » de CSS3.

Pour commencer, tous ceux qui sont intéressés par ce sujet, vous pouvez regarder un exemple du fonctionnement des fenêtres modales dans différentes versions et télécharger les sources :

Vous ne devez pas prendre cette leçon comme un guide d'action, car à ce stade, il n'était possible d'obtenir un support fiable que par les navigateurs modernes ( IE 9+, Firefox, Safari, Opéra, Chrome). Considérant que les anciennes versions du navigateur IE sont encore très populaires parmi les utilisateurs, je recommande de considérer cet article comme une sorte d'expérience, une démonstration des capacités de CSS3.

Bon, passons maintenant directement à la disposition réelle du code HTML et au style de notre fenêtre modale en utilisant CSS3)))

Étape 1. HTML

Tout d’abord, créons un balisage HTML de base. Comme vous pouvez le constater, la conception de base est assez simple, si l'on considère le balisage HTML des fenêtres modales et les boutons (liens) pour les activer. Chaque fenêtre modale n'est rien de plus qu'un conteneur standard