La fenêtre modale html5 est magnifique. Comment créer une fenêtre modale en utilisant du CSS pur sans JavaScript. Créer une fenêtre modale en utilisant HTML5 et CSS3
Les fenêtres modales sont un outil fréquemment utilisé dans l'arsenal d'un webmaster. Il est très approprié pour résoudre grande quantité des tâches telles que l'affichage de formulaires d'inscription, d'unités publicitaires, de messages, etc.
Mais, malgré la place importante dans aide à l'information 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. Balisage complet pour notre exemple, cela ressemblera à ceci :
Ouvrir la fenêtre modale
Fenêtre modale
Un exemple de fenêtre modale simple pouvant être créée en utilisant CSS3.
Il peut être utilisé dans large gamme, en commençant par l'affichage des messages et en terminant par le formulaire d'inscription.
Styles
Créer une classe modalDialog et commence à se former 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 lorsque 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.
Dans ce tutoriel, nous apprendrons comment créer une fenêtre modale en utilisant HTML5 et CSS3. Dans ce tutoriel, nous n'utiliserons pas JS, uniquement du CSS3 complet. Les fenêtres modales peuvent être utilisées pour un formulaire retour, pour les photos et les vidéos, et il existe de nombreuses autres options pour son utilisation.
Commençons par créer notre fenêtre modale.
Étape 1 : balisage HTML
Tout d'abord, nous devons créer un balisage HTML, c'est-à-dire créez un lien qui ouvrira une fenêtre et créez un cadre pour notre fenêtre. Pour ce faire nous écrivons le code suivant :
Étape 2. Contenu de la fenêtre modale
Ajoutons maintenant le contenu de notre fenêtre. Créons un titre et du texte et mettons le tout dans une balise ÉTOILE ROUGE- un projet dédié aux problématiques qui vous intéressent depuis si longtemps. Sur ce projet posté cours gratuits et des articles sur divers sujets. Les sujets sont très divers, allant du simple Installations Windows et se terminant par le développement du site Web. Étape 3. Styles Commençons maintenant à écrire des styles pour notre fenêtre. Dans cette étape, nous rendrons notre fenêtre invisible. Il n'apparaîtra que lorsque vous cliquerez sur le lien. Pour ce faire, nous écrivons des styles pour notre classe modalDialog: 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 ; Étape 4. Fonctionnalité et visualisation Dans cette étape, nous nous assurerons que notre fenêtre fonctionne déjà. Pour ce faire, ajoutons quelques styles supplémentaires pour notre classe modalDialog: ModalDialog:target ( opacité : 1 ; événements de pointeur : auto ; affichage : bloc ; ) .modalDialog > 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, #b8ecfb); A cette étape vous pouvez déjà visualiser votre fenêtre, elle fonctionne déjà. Mais, bouton fermerça n'a pas l'air très joli. Nous devons maintenant ajouter des styles pour notre classe fermer. Étape 5. Créer un bouton de fermeture Dans cette étape, nous améliorerons l'apparence de notre bouton, qui fermera notre fenêtre. Pour ce faire, nous écrivons des styles pour notre classe fermer: 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 : #860015 ;) Eh bien, notre bouton ressemble maintenant à ce qu'il était prévu. Cela devrait ressembler à ceci pour vous : Sur ce cette leçon fini. Merci de votre attention ! Pour votre commodité, j'ai ajouté une version démo et fichiers sources. Si quelque chose n'est pas clair, téléchargez les fichiers sources. Le cours a été préparé pour vous par l'équipe du site ÉTOILE ROUGE. Ce qui servira à désactiver la fonction ou simplement à faire disparaître le cadre, où même sur ce petit élément il y a un effet de changement de palette de couleurs. Désormais, le webmaster peut le mettre sur le site et y placer une description ou des opérateurs, qui peuvent afficher différentes catégories, comme des statistiques ou un informateur. Mais le fait est que si vous avez un style de ressource sombre, alors avec style, vous pouvez rapidement changer le gamma, ou plutôt l'adapter à conception originale. Voici l'un des méthodes standards comment créer du CSS pur sur une fenêtre modale qui sera lancée lorsque l'on clique sur le bouton sous le lien avec liaison HTML. Le bouton lui-même est davantage destiné à la visibilité, où dans les styles vous supprimez une classe et le nom reste, qui peut être placé soit dans la navigation, soit dans le panneau de configuration, où il se trouve fonctionnalité principale ou la navigation sur le site. C'est en vérifiant que tout fonctionne bien : Commençons l'installation :
Fenêtre avec un bouton Butksaton-satokavate ( Anélumen ( Anélumen : cible ( Figure d'Anelumen ( Figure Anelumen.lowingnuska ( Anelumen.lowingnuska figure h2 ( Anelumen : figure cible ( Anelumen.lowingnuska.compatibg-ukastywise ( Anelumen.nedismiseg ( Anelumen:cible .nedismiseg ( Ça commence quand Adresse URL page correspond à l'identifiant de son élément, ou vous pouvez le dire différemment, c'est à ce moment-là que l'utilisateur accède à élément spécifique sur la page. La boîte de dialogue est excellent moyen retirer message court ou des informations. Actuellement, la fenêtre modale est un élément très populaire dans la conception Web. Si vous ajoutez du contenu spécial à la page, il est préférable de le placer dans une fenêtre modale : Auparavant, il était créé à l'aide de JavaScript, qui à l'heure actuelle n’est pas considérée comme une bonne pratique. Mais HTML5 et CSS3 vous permettent de créer des fenêtres modales sans aucun problème. Dans ce tutoriel, nous utiliserons les transitions CSS3, l'opacité, l'événement de pointeur et la couleur d'arrière-plan. Ce modal sera conçu en CSS pur. Il sera réactif et devrait fonctionner correctement sur les smartphones et les tablettes. Et aussi sur grands écrans avec une haute résolution. Tout d’abord, nous devons créer un code HTML simple : Nous avons un lien simple qui vous invite à ouvrir une fenêtre modale et le hashtag modal-one. Nous allons définir tous les styles ici à l'aide de classes, donc l'ID est utilisé comme crochet pour créer le champ modal. N'oubliez pas que nous n'utiliserons que du CSS et non un modal Fenêtre JQuery, utilisons donc le pseudo-sélecteur " :avant la cible”. Ensuite, vous devez enregistrer tout le contenu de la fenêtre modale. À l’intérieur du div, nous placerons un lien hypertexte. Elle ferme le conteneur que nous exposons avec en utilisant CSS. Vous pouvez ensuite mettre un titre avec quelques points de texte en dessous. Notre balisage HTML ressemblera désormais à ceci :
PROJET REDSTAR
ZorNet.Ru - portail des webmasters×
Vous trouverez ici du contenu sur le sujet du site.
CSS
affichage : bloc en ligne ;
décoration de texte : aucune ;
marge droite : 7 px ;
rayon de bordure : 5 px ;
rembourrage : 7px 9px ;
arrière-plan : #199a36 ;
couleur : #fbf7f7 !important;
}
affichage : flexible ;
poste : fixe ;
gauche : 0 ;
haut : -100 % ;
largeur : 100 % ;
hauteur : 100 % ;
align-items : centre ;
justifier-contenu : centre ;
opacité : 0 ;
-webkit-transition : top 0s 0,7s, opacité 0,7s 0s ;
transition : top 0s 0,7s, opacité 0,7s 0s ;
}
haut : 0 ;
opacité : 1 ;
-webkit-transition : aucun ;
transition : aucune ;
}
largeur : 100 % ;
largeur maximale : 530 px ;
position : relative ;
rembourrage : 1,8em ;
opacité : 0 ;
couleur de fond : blanc ;
-webkit-transition : opacité .7s ;
transition : opacité 0,7 s ;
}
arrière-plan : #f9f5f5 ;
rayon de bordure : 7 px ;
rembourrage supérieur : 8 px ;
bordure : 3px solide #aaabad ;
}
marge supérieure : 0 ;
rembourrage en bas : 3 px ;
bordure inférieure : 1px solide #dcd7d7 ;
}
opacité : 1 ;
}
décoration de texte : aucune ;
position : absolue ;
à droite : 8px ;
haut : 0px ;
taille de police : 41 px ;
}
gauche : 0 ;
haut : 0 ;
largeur : 100 % ;
hauteur : 100 % ;
poste : fixe ;
couleur d'arrière-plan : rgba (10, 10, 10, 0,87) ;
contenu: "";
curseur : par défaut ;
visibilité : cachée ;
-webkit-transition : tous les .7 ;
transition : tous les .7 ;
}
visibilité : visible ;
}
Vous devez également savoir que le style CSS et la pseudo-classe font partie de ceux qui ne sont pas pleinement utilisés par Fonctionnalités CSS avec de nombreuses applications potentielles intéressantes. Création d'une fenêtre modale CSS
Styles de définition
Nous avons maintenant un lien hypertexte enveloppé dans un div. Vous pouvez commencer à styliser le conteneur pour le rendre plus pratique. Tout d'abord, créons une classe modale pour une fenêtre modale en CSS. Pour cela nous utilisons le pseudo-élément :before :
Modal :avant (contenu : " ; affichage : aucun ; arrière-plan : rgba(0, 0, 0, 0.6); position : fixe ; haut : 0 ; gauche : 0 ; droite : 0 ; bas : 0 ; z-index : 10; ) .modal:target:before ( display: block; )
Nous créer une fenêtre modale, lui donnant une position fixe. Il descendra au fur et à mesure que l'utilisateur fera défiler la page.
De plus, nous définissons les bords supérieur, droit, inférieur et gauche sur zéro afin que l'arrière-plan sombre couvre tout l'écran. Nous devons maintenant définir l'arrière-plan, la bordure, le rayon de la boîte de dialogue .modal, ainsi que la position fixe. Notre code CSS ressemblera à ceci :
Boîte de dialogue modale (arrière-plan : #fefefe ; bordure : #333 solide 1px ; rayon de bordure : 5px ; marge gauche : -200px ; position : fixe ; gauche : 50 % ; haut : -100 % ; z-index : 11 ; largeur : 360 px ; -webkit-transform : traduire (0, -500 %); -ms-transform : traduire (0, -500 %); transformation : traduire (0, -500 %); ; -moz-transition : -moz-transform 0,3 s de sortie simplifiée ; -o-transition : -o-transform 0,3 s de sortie simplifiée : transformation 0,3 s de sortie simplifiée)
Modal:target .modal-dialog ( -webkit-transform: traduire(0, 0); -ms-transform: traduire(0, 0); transformer: traduire(0, 0); haut : 20%; )
Voici quelques styles supplémentaires à utiliser pour donner à votre modal une belle apparence :
body ( couleur : #333 ; famille de polices : "Helvetica", arial ; hauteur : 80em ; ) .wrap ( padding : 40px ; text-align : center ; ) hr ( clear : les deux ; margin-top : 40px ; margin- bas : 40 px ; bordure : 0 ; bordure-haut : 1 px solide #aaa ; ) h1 ( taille de police : 30 px ; marge inférieure : 40 px ; ) p ( marge inférieure : 20 px ; ) .modal-body ( remplissage : 20 px ; ) .modal-header, .modal-footer ( remplissage : 10px 20px ; ) .modal-header ( border-bottom : #eee solid 1px ; ) .modal-header h2 ( taille de police : 20px ; ) .modal-footer ( border-top : #eee solid 1px ; text-align : right ; )
Maintenant que nous avons stylisé la fenêtre modale HTML et l'avons rendue fonctionnelle, il ne nous reste plus qu'à créer un bouton en bas à droite. Code CSS :
Btn (arrière-plan : #428bca ; bordure : #357ebd solide 1px ; rayon de bordure : 3px ; couleur : #fff ; affichage : bloc en ligne ; taille de police : 14px ; remplissage : 8px 15px ; décoration de texte : aucun ; texte- aligner : centre ; largeur minimale : 60 px ; position : relative ; transition : couleur .1s facilité ; ; remplissage : 15px 20px ; largeur minimale : 100px ; .btn-close (couleur : #aaa ; taille de police : 30px ; décoration de texte : aucune ; position : absolue ; droite : 5px ; haut : 0 ; ) .btn- close:hover ( couleur : #919191 ; ) /*ajouter pour arrêter le défilement vers le haut*/ #close ( affichage : aucun ; )
Quels sont les avantages de la fenêtre modale créée ?
Le principal avantage de notre fenêtre modale est qu'elle est créée en utilisant uniquement HTML5 et CSS3. Pourquoi est-ce si important ? Modal Fenêtre Javascript est quelque chose que même un débutant peut créer. Il y en a beaucoup solutions toutes faites, téléchargeable sur Internet. Alors pourquoi voulons-nous nous contenter de HTML5 et CSS3 sans JavaScript ?
Eh bien, par exemple, pour que les utilisateurs sans Prise en charge de JavaScript pourrait utiliser une fenêtre modale. Les statistiques montrent que plus de 2 % des utilisateurs dans le monde n'utilisent pas JavaScript.
Nous avons effectivement utilisé quelques lignes de code CSS pour créer l'animation. Si vous en appliquez Bibliothèque JavaScript animation, vous serez étonné de voir combien moins de code nous avons utilisé. Cela présente un autre avantage : un code plus propre.
Nous avons implémenté un div qui contient toute l'animation, et ce ne sont que quelques lignes de code. Ce qui rend le code plus propre et cette solution vous permet de modifier ou de déplacer ce div à votre guise sans avoir à vous soucier des changements de code en JavaScript.
Et enfin, HTML5 et CSS3 sont l'avenir. Nous essayons tous de les utiliser dans nos projets. Grâce à eux, vous obtenez un code plus propre sans avoir à vous soucier Bibliothèques JavaScript. HTML5 et CSS3 sont là pour rester, il n'y a donc aucune raison de ne pas les utiliser.
Conclusion
Vous pouvez désormais créer une simple fenêtre modale en utilisant HTML5 et CSS3 qui peut être utilisée pour un formulaire de connexion ou d'inscription, des blocs d'annonces, etc. De plus, vous avez appris pourquoi vous devriez utiliser HTML5 et CSS3 au lieu de JavaScript, et vu plusieurs exemples de la façon dont les sites utilisent les fenêtres modales.
Traduction de l'article " Comment créer une fenêtre modale CSS sans Javascript"a été préparé par l'équipe sympathique du projet.
Salut tout le monde! Dans ce une petite leçon Nous allons créer une fenêtre modale simple mais puissante en utilisant du CSS pur. Et en même temps nous répéterons (et pour qui nous ouvrirons) tel chose utile comme Flexbox. Dans ce cas, nous créerons non seulement une fenêtre modale qui s'ouvre lorsque l'on clique dessus, mais qui se positionne exactement au centre de l'écran. Autrefois, cela ne pouvait se faire qu'avec en utilisant javascript, mais le temps passe et cela peut désormais être fait avec littéralement 4 lignes de code.
Ouvrir la fenêtre modale
Contenu à l'intérieur de la fenêtre
Cette fenêtre modale entière se compose de deux couches - la première couche, qui a la classe Fenêtre modale, assombrit tout l'espace autour de la fenêtre modale et alignera le contenu de la fenêtre au centre de l'écran. La deuxième couche est la classe Modal_Corps— contient le contenu de la fenêtre modale elle-même.
Créons maintenant le code CSS pour ce balisage :
Modal ( position : fixe ; affichage : aucun ; haut : 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; z-index : 0 ; arrière-plan : rgba(0,0,0,0.7) ; événements de pointeur : aucun ; ) .Modal:target ( affichage : flex ; événements de pointeur : auto ; ) .Modal_Body ( position : relative ; z-index : 2 ; affichage : bloc ; marge : auto ; remplissage : 15px ; arrière-plan : #FFF ; ) . ModalFull ( position : absolue ; affichage : bloc ; z-index : 0 ; largeur : 100 % ; hauteur : 100 % ; )
Regardons maintenant le fonctionnement de la fenêtre modale et comprenons comment elle fonctionne.
Comme on peut le voir, lorsque vous cliquez sur « Ouvrir la fenêtre modale », la fenêtre entière est ombrée et une fenêtre modale blanche apparaît exactement au centre. Arrêtons-nous là pour l'instant et consacrons-nous à la théorie.
Puisque nous avons convenu de ne pas utiliser javascript et que nous ne pouvons pas l'utiliser pour suivre les clics sur des éléments, nous pouvons facilement le faire en utilisant une pseudo-classe CSS et un lien d'ancrage avec un hachage (pour indiquer l'élément sur la page donnée) et identifiant avec une valeur qui doit être égale au pointeur dans le lien. Regardez notre exemple : href liens et identifiant le conteneur principal de la fenêtre modale a la même valeur - Fenêtre modale. Ceci est important car le navigateur doit comprendre quels éléments vont interagir les uns avec les autres.
Dans notre cas, le conteneur général de la fenêtre modale est masqué et, par conséquent, tout le contenu de la fenêtre modale est masqué. Mais lorsque l'on clique sur le lien, l'élément obtient une pseudo-classe :cible et apparaît en conséquence. Regardez dans le code CSS - propriété afficher changements de aucun sur fléchir. Notez que c'est du flex, car avec lui on peut aligner Modal_Corps exactement au centre de l'écran. Nous avons immédiatement écrit tous les autres styles.
D'ailleurs, si vous ne comprenez pas très bien comment il a été si aplati sur toute la surface de l'écran, je vais vous le dire : il s'agit des 4 lignes suivantes :
Haut : 0 ; à droite : 0 ; bas : 0 ; gauche : 0 ;
Nous avons indiqué qu'il devait être au pixel zéro à droite, à gauche, en haut et en bas en même temps. Au lieu de cela, vous pouvez utiliser, par exemple, la construction suivante :
Largeur : 100 % ; hauteur : 100vh ;
Ici on précise une largeur égale à 100% de l'écran, mais il vaut mieux régler la hauteur en utilisant hauteur de la fenêtre— hauteur de la fenêtre du navigateur. Je vais m'en tenir à ma version.
Un autre nuance importante est la valeur de la propriété z-index Modal Et Modal_Corps. Ils doivent être présents et Modal_Corps il doit nécessairement avoir une plus grande valeur au moins d'une unité, sinon le contenu de la fenêtre modale ne sera pas disponible - les liens et les boutons ne seront pas cliquables. Et s'il y a du contenu avec défilement, cela ne fonctionnera pas non plus, puisqu'un élément en chevauchera un autre.
Continuons à créer notre chef-d'œuvre. Lorsque vous cliquez dessus, une fenêtre modale apparaît, mais nous ne pouvons pas la fermer aussi facilement. Ajoutons un bouton pour le fermer :
Contenu à l'intérieur de la fenêtre
FermerEn fait, elle annule :cible pour notre fenêtre modale et ensuite il accepte simplement position de départ- disparaît hors de vue. Mais il y a une certaine subtilité avec ce lien : lorsque vous cliquez dessus, le navigateur essaiera de trouver un tel élément, mais échouera et fera défiler la page jusqu'au tout début. Ce comportement est l'un des petits inconvénients de cette approche de création de fenêtres modales, mais il peut être résolu.
Pour cet attribut href au lien dont nous changeons «#» sur "#ModalWindowFermer", et pour le lien du bouton qui a ouvert la fenêtre, ajoutez un attribut identifiant avec la même signification. Vous pouvez également utiliser l'attribut nom, mais en HTML5 il est préférable de définir une ancre et nécessite un attribut identifiant.
Ouvrir la fenêtre modale
Contenu à l'intérieur de la fenêtre
FermerDésormais, lorsque vous cliquez dessus, le navigateur revient au bouton. Par souci de vérité, je tiens à dire que cette ancre sera située le long du bord supérieur de l'écran. Mais si ce bouton d'ouverture se trouve dans l'en-tête ou le pied de page, alors ce problème est nivelé. Et si l'en-tête a une position fixe, alors tout ira bien - par exemple, pour commander rappeler ou la précommande/consultation sera parfaite même lorsque la fenêtre se ferme.
Voici un exemple de ce que nous avons obtenu :
Vous pouvez modifier un peu plus le conteneur Modal_Corps- ce sont des restrictions de taille (pour qu'il ne s'étale pas en hauteur et en largeur). Et encore une petite nuance - je recommande, si possible, de placer le code avec une fenêtre modale avant la balise de fermeture