La fenêtre modale la plus simple en HTML et CSS. Comment créer une fenêtre modale en HTML5 et CSS3

Simple en fonction fenêtre modale, qui est entièrement exécuté en CSS pur, où vous pouvez mettre sous différentes fonctions à appeler sur le site. C'est probablement l'une des nombreuses que j'ai rencontrées à partir de la sélection de fenêtres modales, au niveau de ses réglages de prostate, mais aussi pour l'installation. Mais l'essentiel est sa fonctionnalité, qui ne sera pas inférieure aux autres. De plus, par défaut, il est réalisé dans une teinte claire, où un bouton est installé dans le coin supérieur droit, en forme de croix.

Ce qui ira à la fonction de désactivation ou simplement pour faire disparaître le cadre, où même sur ce petit élément il y a un effet sur le changement de la palette de couleurs. Maintenant, 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 des informateurs.

Mais le fait est que si vous avez un style sombre de la ressource, alors dans le style, vous pouvez rapidement changer l'échelle, ou plutôt l'ajuster à la conception d'origine. Voici l'une des méthodes standard pour faire du CSS pur sur un modal qui sera déclenché lorsqu'un bouton est cliqué sous un lien avec une ancre HTML. Le bouton lui-même sert davantage à la visibilité, où en supprimant une classe dans les styles et le nom restera, qui peut être placé dans la navigation ou dans le panneau de configuration, où se trouve la fonctionnalité principale ou la navigation du site.

C'est en vérifiant que tout fonctionne bien :

Commencer l'installation :

Fenêtre avec un bouton

CSS

Butksaton-satokavate (
affichage : bloc en ligne ;
texte-décoration : aucun ;
marge à droite : 7px ;
rayon de bordure : 5px ;
remplissage : 7px 9px ;
fond : # 199a36 ;
couleur : # fbf7f7!important;
}

Anelumen (
affichage : flexible ;
position : fixe ;
à gauche : 0 ;
Top 100%;
largeur : 100 % ;
hauteur : 100 % ;
align-items: center;
justifier-contenu : centre ;
opacité : 0 ;
-webkit-transition : top 0s .7s, opacité .7s 0s ;
transition : top 0s .7s, opacité .7s 0s ;
}

Anelumen : cible (
haut : 0 ;
opacité : 1 ;
-webkit-transition : aucun ;
transition : aucune ;
}

Figure d'Anelumen (
largeur : 100 % ;
largeur maximale : 530 px ;
position : relative ;
rembourrage : 1,8 em ;
opacité : 0 ;
couleur de fond : blanc ;
-webkit-transition : opacité .7s ;
transition : opacité .7s ;
}

Anelumen.lowingnuska figure (
arrière-plan : # f9f5f5 ;
rayon de bordure : 7px ;
rembourrage haut : 8px ;
bordure : 3px solide #aaabad ;
}

Anelumen.lowingnuska figure h2 (
marge supérieure : 0 ;
rembourrage en bas : 3px ;
bordure inférieure : 1px solide # dcd7d7 ;
}

Anelumen : chiffre cible (
opacité : 1 ;
}

Anelumen.lowingnuska .compatibg-ukastywise (
texte-décoration : aucun ;
position : absolue ;
à droite : 8 pixels ;
haut : 0px ;
taille de la police : 41 px ;
}

Anelumen .nedismiseg (
à gauche : 0 ;
haut : 0 ;
largeur : 100 % ;
hauteur : 100 % ;
position : fixe ;
couleur de fond : rgba (10, 10, 10, 0,87) ;
teneur: "";
curseur : par défaut ;
visibilité : masquée ;
-webkit-transition : tous les .7 ;
transition : tous les .7s ;
}

Anelumen : cible .nedismiseg (
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 les fonctionnalités CSS avec de nombreuses applications potentielles intéressantes.

Il est déclenché lorsque l'URL de la page correspond à l'identifiant de son élément, ou vous pouvez le dire différemment, c'est lorsque l'utilisateur accède à un élément spécifique de la page.

Bonjour à tous! Dans ce court tutoriel, nous allons créer un modal simple mais puissant en CSS pur. Et en même temps, nous répéterons (et pour qui nous ouvrirons) une chose aussi utile que flexbox. Dans ce cas, nous allons créer non seulement une fenêtre modale qui s'ouvre au clic, mais qui se positionne exactement au centre de l'écran. Autrefois, cela ne pouvait être fait qu'en utilisant javascript, mais le temps passe et maintenant cela peut être fait avec littéralement 4 lignes de code.

Ouvrir la fenêtre modale

Toute cette fenêtre modale se compose, pour ainsi dire, de deux couches - la première couche, qui a la classe Fenêtre Modale, assombrit tout l'espace autour du modal et alignera le contenu de la fenêtre au centre de l'écran. Deuxième couche - classe Modal_Corps- contient directement le contenu de la fenêtre modale.

Créons maintenant le 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 : cible (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 travail de la fenêtre modale et voyons comment elle fonctionne.

Comme on peut le voir, lorsque vous cliquez sur "Ouvrir la fenêtre modale", toute la fenêtre est ombrée, et une fenêtre modale blanche apparaît exactement au centre. Attardons-nous là-dessus pour l'instant et consacrons-nous à la théorie.

Puisque nous avons accepté de ne pas utiliser javascript et que nous ne pouvons pas l'utiliser pour suivre les clics sur les éléments, nous pouvons facilement le faire en utilisant une pseudo-classe CSS et un lien d'ancrage avec un hachage (pour pointer vers un élément sur une page donnée) et identifiant avec une valeur qui est nécessairement égale au pointeur dans le lien. Jetez un œil à notre exemple : href liens et identifiant le conteneur principal de la fenêtre modale a la même signification - Fenêtre Modale... Ceci est important car le navigateur doit comprendre quels éléments interagiront 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 en cliquant sur le lien, l'élément obtient la pseudo-classe : cible et apparaît en conséquence. Regardez dans le code css - propriété affichage changements de rien au fléchir... Notez qu'il est flexible, car avec lui, nous pouvons aligner Modal_Corps exactement au centre de l'écran. Nous lui avons attribué tous les autres styles en même temps.

Au fait, si vous ne comprenez pas très bien comment il a été si aplati sur toute la surface de l'écran, je vous le dis - le tout est dans les 4 lignes suivantes :

Haut : 0 ; à droite : 0 ; bas : 0 ; à gauche : 0 ;

Nous avons indiqué qu'il devrait être, pour ainsi dire, au pixel zéro à droite, à gauche, en haut et en bas à la fois. Au lieu de cela, vous pouvez utiliser, par exemple, la construction suivante :

Largeur : 100 % ; hauteur : 100vh ;

Ici, nous spécifions la largeur égale à 100% de l'écran, mais il est préférable de définir la hauteur en utilisant hauteur de la fenêtre- la hauteur de la fenêtre du navigateur. Je vais me concentrer sur ma version.

Un de plus nuance importante La valeur de la propriété z-index de Modal et Modal_Corps... Ils doivent être obligatoires et Modal_Corps il doit être au moins une unité plus grande en valeur, sinon le contenu de la fenêtre modale ne sera pas disponible - les liens et les boutons seront impossibles à cliquer. Et s'il y aura du défilement, cela ne fonctionnera pas non plus, car un élément chevauchera l'autre.

Continuons à créer notre chef-d'œuvre. Lorsque vous appuyez dessus, la fenêtre modale apparaît, mais nous ne pouvons pas simplement la fermer. Ajoutons un bouton pour le fermer :

En fait, il annule : cible pour notre fenêtre modale, puis prend simplement la position initiale - elle est cachée hors de vue. Mais il y a une subtilité avec ce lien - lorsque vous cliquez dessus, le navigateur essaiera de trouver un tel élément, mais il échouera et fera défiler la page jusqu'au tout début. Ce comportement est l'un des petits inconvénients de cette approche pour faire des modaux, mais il peut être traité.

Pour cela, l'attribut href au lien nous changeons de «#» au "#ModalWindowFerme", et pour le bouton-lien qui a ouvert la fenêtre, ajoutez l'attribut identifiant avec la même valeur. Vous pouvez également utiliser l'attribut Nom, mais en HTML5, il est préférable de définir une ancre et vous devez spécifier un attribut identifiant.

Ouvrir la fenêtre modale

Maintenant, lorsque vous cliquez dessus, le navigateur revient au bouton. Par souci de vérité, je tiens à dire que cette ancre sera située au bord supérieur de l'écran. Mais, si ce bouton d'ouverture est dans l'en-tête ou le pied de page, alors ce problème est nivelé. Et si le header'a a une position fixe, ça ira en général - par exemple, pour commander un rappel ou une pré-commande/consultation, ça fonctionnera très bien lors de la fermeture de la fenêtre.

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 (afin qu'il ne s'étende pas en hauteur et en largeur). Et encore une petite nuance - je recommande de placer le code avec une fenêtre modale, si possible, avant la balise de fermeture

.

C'est ainsi que vous pouvez créer rapidement une fenêtre modale. Ce code, que nous avons écrit, peut être utilisé sous sa forme de base, en ajoutant les styles nécessaires au besoin.

J'espère que mon tuto vous a été utile. Bonne journée à vous et à bientôt sur les îles du Web !

Une boîte de dialogue est un excellent moyen d'afficher un court message ou des informations. Le modal est un élément très populaire de la conception Web de nos jours. Si vous ajoutez du contenu spécial à la page, il est préférable de le mettre dans une fenêtre modale :

Auparavant, il était créé à l'aide de JavaScript, qui sur ce moment pas considéré comme la meilleure pratique. Mais HTML5 et CSS3 facilitent la création de modaux. Dans ce didacticiel, nous utiliserons les transitions CSS3, l'opacité, l'événement de pointeur et la couleur d'arrière-plan.

Ce modal sera conçu avec du CSS pur. Il sera réactif et devrait fonctionner correctement sur les smartphones et les tablettes. Et aussi sur de grands écrans haute résolution.

Création d'une fenêtre modale CSS

La première chose à faire est de créer un code HTML simple :

Nous avons un lien simple qui propose d'ouvrir une fenêtre modale et le hashtag modal-one. Nous allons spécifier tous les styles ici en utilisant des classes, donc l'identifiant est utilisé comme un crochet pour créer le champ modal.

N'oubliez pas que nous n'utiliserons que du CSS, pas un modal jQuery, nous utiliserons 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 le lien hypertexte. Il ferme le conteneur que nous sortons avec en utilisant CSS... Vous pouvez ensuite placer un titre avec quelques paragraphes de texte en dessous. Notre balisage HTML ressemblera maintenant à ceci :