Les fenêtres modales et les bo?tes lumineuses peuvent implémenter des fonctions de base via des CSS purs sans javascript. 1. Utilisez le: Pseudo-classe cible pour contr?ler l'état d'affichage en fonction des points d'ancrage de l'URL. L'avantage est qu'il n'y a pas de script requis, mais le masque ne peut pas être fermé; 2. Utilisez la case à cocher cachée et l'étiquette pour obtenir une interaction plus flexible, telles que cliquer sur Mask pour fermer et ajouter des transitions d'animation; 3. Faites attention aux détails de l'optimisation tels que la compatibilité, l'accessibilité (comme l'ajout de l'éclat Aria) et la prévention du défilement des antécédents (en utilisant le débordement: caché). Les deux méthodes ont leurs propres scénarios applicables, adaptés aux pages statiques ou aux projets légers.

Les fenêtres modales et les lightbox sont des composants interactifs courants dans les pages Web, qui sont utilisés pour faire appara?tre une couche de masque translucide sur la page actuelle et afficher un contenu supplémentaire. Les implémenter ne nécessite pas réellement JavaScript complexe, et l'utilisation de CSS pure peut également atteindre des fonctions de base, en particulier adaptées aux pages statiques ou aux besoins légers.

Structure de base et méthode de déclenchement

Pour créer une fenêtre modale, la structure HTML comprend généralement:

• Bouton de déclenchement (comme "cliquez pour ouvrir")
• Couche de masque (superposition ou toile de fond)
• Zone de contenu de fenêtre contextuelle (contenu modal)

Utilisez CSS pour contr?ler l'affichage de l'état caché, qui peut être contr?lé par :target ou combinée avec l'état checked checkbox :target est la manière la plus simple, mais elle nécessite un point d'ancrage dans l'URL; tandis que checkbox est plus flexible et ne modifie pas la barre d'adresse.

 <a href = "# modal"> ouvrir la fenêtre pop-up </a>
<div id = "modal" class = "modal">
  <div class = "modal-content">
    <a href = "#"> Close </a>
    <p> c&#39;est le contenu pop-up </p>
  </div>
</div>

Style et contr?le interactif

Cette partie repose principalement sur CSS pour compléter l'expression visuelle et la logique interactive.

Utilisation: cible pour changer

Cette méthode utilise des points d'ancrage pour activer les fenêtres contextuelles, et lorsque l'URL contient #modal , l'élément correspondant appliquera des styles.

 .modal {
  Affichage: aucun;
}

.Modal: Target {
  Affichage: bloc;
  Position: fixe;
  en haut: 0; à gauche: 0;
  Largeur: 100%; hauteur: 100%;
  Color en arrière-plan: RGBA (0,0,0,0,5);
}

L'avantage de cette méthode est qu'il n'utilise pas du tout JS, et l'inconvénient est qu'il ne peut pas fermer la fenêtre contextuelle en cliquant sur le masque à moins qu'il ajoute un lien vers un autre emplacement sur la page.

Utilisez la case à cocher pour contr?ler l'état

Une approche plus moderne consiste à utiliser la case cachée et les combinaisons d'étiquettes, qui peuvent prendre en charge la fermeture du masque de clic, la transition d'animation et d'autres effets.

 <input type = "checkbox" id = "modal-toggle" Hidden>
<étiquette pour = "modal-toggle" class = "modal-trigger"> ouvrir la fenêtre pop-up </ label>

<div class = "modal">
  <étiquette pour = "modal-toggle"> Close </ Label>
  <div class = "modal-content">
    <p> c&#39;est le contenu </p>
  </div>
</div>

Logique d'affichage de contr?le CSS:

 .modal {
  Affichage: aucun;
}

# modal-toggle: vérifié ~ .Modal {
  Affichage: bloc;
}

Cette méthode est plus extensible et plus facile à cliquer pour fermer avec l'animation et le calque de masque.

Notes et suggestions d'optimisation

• Compatibilité et expérience : la solution CSS pure, bien que légère, peut ne pas être entièrement prise en charge sur les navigateurs plus anciens (tels que IE), ou peut manquer d'animations de transition.
• Accessibilité (A11Y) : l'ajout aria-label ou role="dialog" peut aider à écran les lecteurs de reconnaissance du contenu contextuel.
• Cliquez sur Masque pour fermer : Si vous souhaitez cliquer sur Mask pour fermer la fenêtre contextuelle, vous pouvez utiliser une étiquette pour couvrir l'intégralité du calque de masque et le lier à la case à cocher.
• Empêcher le défilement d'arrière-plan : lorsque la fenêtre contextuelle est affichée, l'ajout overflow: hidden au corps peut empêcher le contenu derrière lui de faire défiler.

Résumons

Le c?ur de l'utilisation de CSS pour créer une fenêtre modale ou une bo?te lumineuse consiste à contr?ler la méthode de commutation de l'état d'affichage. :target convient à une implémentation rapide, tandis que l'étiquette de la case à cocher est plus adaptée aux scénarios complexes. Bien que ces méthodes ne remplacent pas complètement la flexibilité de JS, elles sont suffisantes pour des pages statiques ou des projets légers.

Fondamentalement, ce n'est pas difficile à mettre en ?uvre, mais certains détails sont faciles à ignorer, comme la position du bouton de fermeture, la plage de réponse de la couche de masque et le problème de l'adaptation terminale mobile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!