La fenêtre modale la plus simple sur HTML et CSS

et insérer dans le code au lieu de points. Vous devez toujours insérer un lien sur lequel notre fenêtre sera fermée et le donnera classe \u003d "Fermer". C'est ainsi que votre code devrait ressembler à:

Projet de Redstar

Étoile rouge - Projet dédié aux questions qui ont été intéressées depuis si longtemps. Ce projet contient des leçons et des articles gratuits sur divers sujets. Les thèmes sont très divers, allant de simples installations Windows Et se terminant par le développement de sites.

Étape 3. Styles

Maintenant, nous commençons à écrire des styles pour notre fenêtre. Dans cette étape, nous ferons une fenêtre invisible. Il n'apparaîtra que en cliquant sur le lien. Pour cela, nous écrivons des styles pour notre classe modaldialog.:

Modaldialog (position: fixe; Font-famille: Arial, Helvetica, Sans Serif; Top: 0; droite: 0; bas: 0; gauche: 0; arrière-plan: rgba (0,0,0,0,8); z; z -Index: 99999; Opacité: 0; -WebKit-Transition: opacité 400ms Facilité-in; -Moz-transition: opacité 400ms Facilité-in; transition: opacité 400ms Facilité-in; Affichage: Aucun; Pointeur-Events: Aucun;)

Étape 4. Fonctionnalité et visualisation

Dans cette étape, nous ferons que notre fenêtre commence déjà à fonctionner. Pour ce faire, ajoutez quelques styles de plus pour notre classe. modaldialog.:

Modaldialog: cible (Opacité: 1; Pointeur-Events: Auto; Affichage: Bloc;) .Modaldialog\u003e Div (largeur: 400px; Position: Relative; Marge: 10% Auto; Rembourrage: 5px 20px 13px; Border-Radius: 10px ; arrière-plan: #fff; arrière-plan: -Moz-gradient linéaire (#fff, # b8ecfb); arrière-plan: -webkit-gradient linéaire (#fff, # b8ecfb); arrière-plan: -o-linéaire-gradient (#fff, # B8ecfb);)

À cette étape, vous pouvez déjà voir votre fenêtre, c'est déjà des fonctions. Mais bouton fermer Ça ne semble pas très beau.

Maintenant, nous devons ajouter des styles pour notre classe fermer.

Étape 5. Nous faisons le bouton de fermeture

Dans cette étape, nous améliorerons l'apparence de notre bouton, qui fermera notre fenêtre. Pour cela, nous écrivons des styles pour notre classe fermer:

Fermer (arrière-plan: # 606061; couleur: #ffffff; hauteur de la ligne: 25px; position: absolu; droite: -12px; text-alignement: centre; Haut: -10px; Largeur: 24px; Texte-Décoration: Aucun; Font- Poids: gras; -webkit-frontière-rayon: 12px; -Moz-frontières-rayon: 12px; rayon de frontière: 12px; -moz-box-ombre: 1px 1px 3px # 000; -webkit-box-ombre: 1px 1px 3px # 000; ombre de la boîte: 1px 1px 3px # 000;) .close: plancher (arrière-plan: # 860015;)

Eh bien, maintenant notre bouton ressemble et pensé. Vous devriez aussi ressembler à:

Cette leçon est terminée. Merci pour l'attention! Pour votre commodité, j'ai ajouté une version de démonstration et fichiers source. Si, quelque chose n'est pas clair, téléchargez les fichiers source.

La leçon pour vous est préparée par l'équipe du site. Étoile rouge.

Bonjour à tous! Dans cette petite classe, nous créerons une fenêtre modale simple mais puissante sur Pure CSS. Et en même temps, nous répétons (et pour qui je vais ouvrir) une chose utile comme Flexbox. Dans le même temps, nous ne créerons pas qu'une fenêtre modale qui s'ouvre en cliquant sur, et qui est positionnée exactement au centre de l'écran. Une fois qu'il était possible de le faire pendant longtemps, seulement avec JavaScript, mais le temps passe et cela peut maintenant être fait en utilisant littéralement 4 lignes de code.

Fenêtre modale ouverte

Toutes cette fenêtre modale se compose de deux couches - la première couche, qui a une classe Modalwindow., assombrit l'espace entier autour de la fenêtre modale et alignera le contenu de la fenêtre au centre de l'écran. Deuxième couche - classe Modal_body. - Contient le contenu de la fenêtre modale elle-même directement.

Créez maintenant un code CSS pour ce marquage:

Modal (position: fixe; affichage: aucun; haut: 0; droite: 0; bas: 0; gauche: 0; z-index: 0; arrière-plan: rgba (0,0,0,0,0,7); pointeur -Events: Aucun;) .Modal: cible (affichage: flex; pointeur-Events: auto;) .Modal_bay (Position: Relative; Z-Index: 2; Affichage: Bloc; Padding: 15px; Contexte: # FFF;). Modalful (Position: Absolute; Affichage: Bloc; Z-Index: 0; Largeur: 100%; Hauteur: 100%;)

Regardons le travail de la fenêtre modale et discernez comment cela fonctionne.

Comme nous le voyons, lorsque vous cliquez sur "Ouvrir la fenêtre modale", la fenêtre Shads la fenêtre et la fenêtre modale blanche apparaît exactement au centre. À ce sujet jusqu'à ce que nous nous arrêtions et consacre soi-même la théorie.

Puisque nous avons convenu de ne pas utiliser JavaScript et ne pouvez pas l'aider. En appuyant sur les éléments, nous pouvons facilement le faire à l'aide de CSS-pseudo-classes et de liens d'ancrage avec HASH (pour spécifier un élément sur cette page) et identifiant Avec une valeur qui doit être égale au pointeur dans le lien. Regardez notre exemple: href. Liens I. identifiant Le conteneur principal de la fenêtre modale a la même valeur - Modalwindow.. Ceci est important car le navigateur doit comprendre quels articles interagiront les uns avec les autres.

Dans notre cas, le conteneur général de la fenêtre modale est masqué et, en conséquence, tout le contenu de la fenêtre modale est caché. Mais lorsque vous cliquez sur le lien, l'élément obtient un pseudo-classe. : cible. Et en conséquence apparaît. Regardez le code CSS - Propriété affichage Change S. rien sur le fléchir. Notez que Flex, car avec l'aide de celui-ci, nous pouvons aligner Modal_body. Écran exactement centré. Tous les autres styles que nous avons enregistrés pour lui immédiatement.

Au fait, si vous ne comprenez pas bien comment cela aplatit tout cela sur toute la surface de l'écran, je raconte - le tout dans les 4 suivants:

TOP: 0; Droite: 0; Bas: 0; à gauche: 0;

Nous avons souligné que cela devrait être dans un pixel zéro à droite, à gauche, en haut et en bas en même temps. Au lieu de cela, vous pouvez utiliser, par exemple, une telle conservation:

Largeur: 100%; Hauteur: 100vh;

Nous spécifions ici une largeur égale à 100% de l'écran, mais la hauteur est préférable d'installer avec hauteur de la vision - la hauteur de la fenêtre du navigateur. Je vais m'arrêter sur ma version.

Une autre une nuance importante - Ceci est la valeur de la propriété Z-Index Modal et Modal_body.. Ils doivent être nécessairement, et Modal_body. Il doit nécessairement être plus de valeur d'au moins une unité, sinon le contenu de la fenêtre modale ne sera pas disponible - les liens et les boutons ne seront pas possibles pour appuyer sur. Et s'il y a un contenu de défilement là-bas, cela ne fonctionnera pas, car un élément chevauchera l'autre.

Nous continuerons à créer votre chef-d'œuvre. Lorsque vous cliquez sur, la fenêtre modale apparaît, mais nous ne pouvons pas simplement la fermer. Ajoutons un bouton pour la fermer:

En fait, elle annule : cible. Pour notre fenêtre modale, cela prend simplement la position initiale - Cacher de l'œil. Mais avec cette référence, il y a une subtilité - lorsqu'il est pressé, le navigateur essaiera de trouver un tel élément, mais souffrira de fiasco et allumera la page au tout début. Ce comportement est l'un des petits minus d'une telle approche de la fabrication de fenêtres modales, mais elle peut être traitée avec elle.

Pour cet attribut href. Références que nous changeons avec «#» sur le "#Modalwindowfrose"et le bouton-lien qui a ouvert la fenêtre, ajoutez un attribut identifiant C le même sens. Vous pouvez utiliser l'attribut nom.mais dans HTML5 pour déterminer l'ancre est préférable et nécessaire pour indiquer l'attribut identifiant.

Fenêtre modale ouverte

Maintenant, appuyez sur le navigateur revenir sur le bouton. Pour la vérité, je veux dire que cette ancre sera située sur le bord supérieur de l'écran. Mais si ce bouton pour l'ouverture est en tête d'en-tête ou de pied de page, ce problème est nivelé. Et si l'en-tête a une position fixe, ce sera génial, par exemple, de commander un rappel ou une pré-commande / consultation, tout ira bien et lors de la fermeture de la fenêtre.

Voici un exemple de ce que nous avons fait:

Vous pouvez également modifier le conteneur Modal_body. - Ce sont des limites de taille (de manière à ne pas sécher la hauteur et la largeur). Et une autre petite nuance - je recommande le code avec une fenêtre modale, chaque fois que possible, pour vous asseoir devant la balise de fermeture

.

C'est ainsi que vous pouvez rapidement faire une fenêtre modale. Ce code que nous avons écrit peut être utilisé dans la version de base en ajoutant les styles nécessaires au besoin.

J'espère que ma leçon était utile pour vous. Bonne journée à vous et avant la nouvelle réunion sur les Îles-Web!

Simple sur la fenêtre modale des fonctions, qui est entièrement effectuée sur Pure CSS, où vous pouvez mettre des fonctions différentes pour un appel sur le site. Ceci est probablement l'un des nombreux que j'ai rencontrés à partir du choix de la fenêtre modale, en termes de paramètres de la prostate, mais aussi bien que sur l'installation. Mais la principale chose est sa fonctionnalité qui n'abandonnera pas les autres. Il est également fait par défaut pour une nuance de lumière, où le bouton, la forme du croisement est installé dans le coin supérieur droit.

Ce qui ira à la fonction de voyage ou simplement, de sorte que le cadre disparaisse, où même sur ce petit élément, il y a un effet sur la modification de la palette de couleurs. Maintenant, le webmaster peut être mis sur le site et placer une description ou des opérateurs, ce qui peut générer différentes catégories comme statistiques ou informer.

Mais le fait est que si vous avez un style sombre de la ressource, alors dans le style, vous pouvez changer rapidement la plage ou plutôt adapté sous la conception originale. Voici l'une des méthodes standard, comment rendre CSS propre à la fenêtre modale, qui démarrera lorsque vous appuyez sur le bouton sous le lien avec la liaison HTML. Le bouton lui-même est plus pour la visibilité, où dans le style de retrait d'une classe et que le nom sera le nom, qui peut être remis à la fois à la navigation ou au panneau de commande, où se trouve la fonctionnalité principale ou le site de navigation.

C'est à ce moment-là que tout fonctionne bien:

Faire installer:

Fenêtre avec bouton

CSS.

Butksaton-Satokavate (
Affichage: Inline-Block;
Texte-Décoration: Aucun;
Marge-droite: 7px;
Rayon frontalier: 5px;
Rembourrage: 7px 9px;
Contexte: # 199a36;
Couleur: # FBF7F7! IMPORTANT;
}

Anelumen (
Affichage: flex;
Position: fixe;
à gauche: 0;
Top 100%;
largeur: 100%;
Hauteur: 100%;
Align-items: centre;
Justify-Content: Centre;
Opacité: 0;
-WebKit-Transition: Top 0s .7S, opacité 0s 0s;
Transition: Top 0s .7S, opacité .7s 0s;
}

Anelumen: cible (
TOP: 0;
Opacité: 1;
-Webkit-transition: aucun;
Transition: Aucun;
}

Figure Anelumen (
largeur: 100%;
Max-largeur: 530px;
Position: relatif;
Rembourrage: 1.8EM;
Opacité: 0;
Couleur de fond: blanc;
-Webkit-transition: opacité .7s;
Transition: opacité .7s;
}

Anelumen.Lovenuska figure (
CONTEXTE: # F9F5F5;
Border-rayon: 7px;
Rembourrage: 8px;
Frontière: 3px solide #aaabad;
}

Anelumen.Lovenuska Figure H2 (
Marge-top: 0;
Rembourrage - Fond: 3PX;
Fond frontière: 1px solide # DCD7D7;
}

Anelumen: Figure cible (
Opacité: 1;
}

Anelumen.laidnuska .Compatibg-ukastywise (
Texte-Décoration: Aucun;
Position: absolu;
Droite: 8px;
TOP: 0PX;
Taille de la police: 41px;
}

Anelumen .nedifieismiseg (
à gauche: 0;
TOP: 0;
largeur: 100%;
Hauteur: 100%;
Position: fixe;
Couleur de fond: RGBA (10, 10, 10, 0,87);
Contenu: "";
Curseur: défaut;
Visibilité: cachée;
-Webkit-transition: tous .7s;
Transition: Tous .7s;
}

Anelumen: cible .nedifiseg (
Visibilité: visible;
}

Vous devez également savoir que la stylistique de CSS et la pseudoclasse, c'est l'une de celles-ci non utilisées conformément aux fonctions CSS avec de nombreuses applications potentielles intéressantes.

Il commence lorsque l'adresse de la page URL correspond à l'identifiant à son élément ou peut être exprimée différemment, c'est lorsque l'utilisateur saute sur un élément spécifique de la page.