Construire une fenêtre modale CSS adaptative

Ce didacticiel est un autre projet CSS amusant qui vous aide à créer quelque chose que vous pensiez pouvoir être possible uniquement avec JavaScript. Nous allons créer une fenêtre modale qui peut être affichée et masquée avec un clic activé par une case à cocher CSS.

Pour simplifier les choses, nous allons également utiliser une requête média pour nous assurer que l'écran modal s'adapte bien aux tailles d'écran les plus petites. Faisons un saut et voyons comment cela fonctionne!

Démo en direct: Cliquez ici pour lancer.

Commencer

Pour commencer, nous aurons besoin d’un contenu générique toujours visible sur la page. Nous n'avons besoin de rien d'extraordinaire, juste du texte pour l'instant. J'ai utilisé un titre de base et un paragraphe:

Jusqu'ici tout va bien, passons maintenant au bouton qui va basculer notre fenêtre modale.

Basculer HTML

Dans cet article, les commentateurs ont voté pour voir plus de tutoriels sur la façon de remplacer les cases à cocher pour créer des événements de clic en CSS pur, c'est donc exactement ce que nous allons faire ici!

Comment cela fonctionne est assez simple. Nous commençons avec une entrée avec un type de case à cocher? avec une étiquette de texte de base attachée comme ceci:

Comme vous pouvez le constater, le label? section correspond à l'ID de l'entrée. C'est important! La fonctionnalité intéressante ici est que, même si nous cachons la case à cocher réelle, ce qui est exactement ce que nous allons faire, cette étiquette peut servir d’élément cliquable qui bascule l’état coché de la case.

HTML modal

Il est maintenant temps de finir notre code HTML en ajoutant le code de la fenêtre modale. Après la case à cocher, créez un div avec une classe de "modal". Dans cette div, vous pouvez placer ce que vous voulez. Je suis allé avec un autre titre simple et la configuration du paragraphe.

Avec cela, nous avons tous terminé avec notre code HTML. Si nous ouvrons notre page dans un navigateur, il n'y a vraiment pas grand chose à voir. Cependant, tous les éléments clés dont nous avons besoin sont en place et prêts à être dénommés.

CSS corps et conteneur

Maintenant que notre code HTML est terminé, passons à notre code CSS et commençons à lui donner une meilleure apparence. La première chose que je vais faire est de mélanger une image de fond en bois répétitive pour rendre notre page un peu plus attrayante.

Comme vous pouvez le constater, cette image provient de SubtlePatterns. Ensuite, nous allons styliser notre conteneur. Commencez par commencer avec des marges, un remplissage et un dimensionnement, puis passez au texte.

Comme vous pouvez le constater, nous avons utilisé un raccourci CSS pour déclarer le style de police de nos en-têtes et paragraphes. C'est un moyen succinct de déclarer votre poids, votre taille, votre hauteur de trait et votre famille de polices. Notez que ma hauteur de ligne est définie sur 1,5 et qu'aucun type d'unité n'est spécifié. C'est un petit truc qui vous permet de déclarer votre hauteur de ligne sous forme de rapport à la taille de police.

Case à cocher CSS

Maintenant que nous avons stylé notre contenu de page générique, il est temps d'attaquer le libellé et la case à cocher. La première étape consiste ici à styler l’étiquette afin qu’elle ressemble davantage à un bouton et moins à un simple morceau de texte.

Si nous changeons l'étiquette en un élément de niveau bloc, nous pouvons déclarer une hauteur, une largeur et une couleur d'arrière-plan, ce qui nous aide à obtenir l'aspect du bouton recherché. Notez également que j’ai configuré un style de survol pour modifier la couleur et le curseur afin qu’il se comporte davantage comme un lien.

Avec notre étiquette qui ressemble à ce que nous voulons, nous pouvons maintenant supprimer la case à cocher. Pour ce faire, changez simplement la position en absolu et poussez-le hors du canevas.

Avec ce code, notre page est vraiment géniale. Voici un coup d'oeil:

CSS modal

Le contenu de la page statique est annoté et stylé. Notre tâche suivante consiste à faire en sorte que le dernier bloc de code HTML ressemble à une boîte modale. Nous faisons cela avec un gros morceau de CSS. Jetons un coup d'oeil et ensuite je vous guiderai à travers.

Il se passe beaucoup de choses ici, alors brisons-le. Le premier objectif était de centrer la boîte sur la page. C'est assez délicat étant donné que nous utilisons la fenêtre d'affichage complète et ne connaissons donc pas les dimensions de notre parent.En utilisant le positionnement absolu, les marges automatiques et la réinitialisation des valeurs de positionnement, nous centrons automatiquement et automatiquement notre article sur l’écran.

Notez que j'ai également défini l'index z sur une valeur négative. En effet, la fenêtre modale, même masquée, peut bloquer d'autres éléments de la page. Vous ne le verrez pas, mais cela pourrait empêcher un clic ou un survol, nous le lançons donc au bas de la pile.

Le reste du code est visuel. Nous lui avons attribué les travaux: un arrière-plan légèrement transparent, une zone d’ombre, une transition et des angles arrondis. Notez que l'opacité est définie sur 0 par défaut. En effet, nous souhaitons que la fenêtre modale ne s'ouvre que lorsque nous cliquons sur le bouton.

Type modal

Nous avons notre boîte de style, mais n'oubliez pas le type à l'intérieur. Nous utiliserons des styles similaires mais légèrement différents de ceux de l’autre texte de la page. N'oubliez pas de styler h2 et le paragraphe.

État vérifié

Fais-le fonctionner!

La boîte modale a bonne mine maintenant, mais vous ne le saurez jamais car elle est cachée. Faisons en sorte qu'il apparaisse lorsque l'utilisateur clique sur l'étiquette / le bouton.

Ici, nous avons ciblé l’entrée avec le? Toggle? classe et un état vérifié, puis a cherché un frère adjacent avec une classe de "modal". Ensuite, nous apportons l’opacité et l’indice z de la fenêtre modale à un pour qu’elle devienne pleinement visible.

CSS adaptatif

Notre boîte modale est presque terminée! Tout fonctionne correctement et stylé bien. Cependant, j'ai remarqué que les choses ne se présentaient pas bien lorsque la taille de la fenêtre d'affichage était réduite. Un petit peu de style adaptatif ici va un long chemin, alors mettons dans l'effort.

Comme vous pouvez le constater, j’ai simplement configuré une requête multimédia à 767 pixels et réduit la taille de quelques éléments: les dimensions de la zone, le h2 et le paragraphe. Maintenant, la boîte modale a deux états différents qui la rendent superbe sur les petits ou les grands écrans.

Voyez-le en action

Avec ça, nous avons tous fini! Pour tester la page par vous-même, visitez la démo ci-dessous.

Démo: Cliquez ici pour lancer.

Qu'est-ce que tu penses?

Voilà, une fenêtre modale CSS pure qui s’adapte aux petites et grandes tailles d’écran. Comme toujours, il a eu des problèmes sémantiques lorsqu'il a détourné une case à cocher pour quelque chose comme ceci, mais je ne pensais pas que c'était un travail pour: target, donc cela semblait être la voie à suivre.

Laissez un commentaire ci-dessous et laissez-moi savoir ce que vous pensez. Que changerais tu? Comment pourriez-vous l'améliorer?