Pour obtenir un effet pop-up de base, vous devez suivre les étapes suivantes: 1. Structure: Utilisez HTML pour créer des boutons de déclenchement, une couche de masque et une zone de contenu contextuelle; 2. Style: Définissez la mise en page cachée et centrée par défaut, l'arrière-plan du masque et les styles de bouton de fermeture via CSS; 3. Interaction: Utilisez JavaScript pour lier les événements de clic pour contr?ler l'affichage et la masque de fenêtre contextuels et peuvent étendre la fonction de cl?ture de la clé ESC; 4. Optimisation: ajoutez l'animation CSS pour améliorer l'expérience utilisateur. L'ensemble du processus ne nécessite pas de bibliothèque tierce, ce qui convient pour réaliser rapidement des fonctions contextuelles de base.

Les fenêtres contextuelles ou les bo?tes modales sont très courantes dans les pages Web, telles que les bo?tes de connexion, les informations rapides, etc. Il n'est en fait pas difficile d'implémenter une fenêtre contextuelle de base. Il ne nécessite que HTML, CSS et un peu JavaScript.

Ensuite, je vais parler de la fa?on de faire un simple effet pop-up étape par étape.

1. Structure: utilisez HTML pour créer un cadre de base

écrivez d'abord la partie structurelle, HTML comprend principalement des boutons de déclenchement, une couche de masque et une zone de contenu contextuel.

 <! - Bouton de déclenchement ->
<Button id = "openModal"> Ouvrir la fenêtre pop-up </futon

<! - Structure de fenêtre pop-up->
<div class = "modal" id = "modal">
  <div class = "modal-overlay" id = "modaloverlay"> </ div>
  <div class = "modal-content">
    <span class = "close-btn" id = "closebtn"> & time; </span>
    <p> Il s&#39;agit d&#39;un contenu contextuel simple </p>
  </div>
</div>

Voici quelques éléments clés:

• button est un bouton utilisé pour déclencher un écran contextuel;
• .modal est l'ensemble du conteneur pop-up;
• .modal-overlay est la couche de masque d'arrière-plan;
• .modal-content est le contenu spécifique de la fenêtre contextuelle;
• .close-btn est le bouton Fermer, en utilisant le symbole × symbole.

2. Style: Utilisez CSS pour contr?ler l'apparence et l'animation des fenêtres contextuelles

Cette partie contr?le principalement le style lorsque les fenêtres contextuelles sont cachées par défaut et l'effet de couche de masque.

 .modal {
  Affichage: aucun; / * Masquer par défaut * /
  Position: fixe;
  en haut: 0;
  à gauche: 0;
  Largeur: 100%;
  hauteur: 100%;
  Z-Index: 999;
}

.Modal-Overlay {
  Color d'arrière-plan: RGBA (0, 0, 0, 0,5);
  Largeur: 100%;
  hauteur: 100%;
}

.modal-contenu {
  Color d'arrière-plan: #FFF;
  marge: 15% automatique;
  rembourrage: 20px;
  Border-Radius: 5px;
  Largeur: 300px;
  Position: relative;
  Box-Shadow: 0 5px 15px RGBA (0, 0, 0, 0,3);
}

.close-btn {
  Position: absolue;
  En haut: 10px;
  à droite: 15px;
  taille de police: 24px;
  curseur: pointeur;
}

Faites attention à quelques points:

• La fenêtre contextuelle est masquée par défaut (affichage: aucune), et sera affichée à l'aide de JS plus tard;
• La couche de masquage était faite d'un fond noir translucide;
• Le contenu de la fenêtre contextuelle est centré sur la marge et la largeur fixe;
• Le bouton de fermeture est absolument positionné et placé dans le coin supérieur droit.

3. Interaction: utilisez JS pour contr?ler l'affichage et masquer

Cette partie est la chose la plus importante, elle est responsable de la liaison des événements de clic et de l'état de la fenêtre contextuelle.

 const modal = document.getElementById ("modal");
const openBtn = document.getElementById ("openModal");
const closebtn = document.getElementById ("closeBtn");
const superlay = document.getElementById ("modalOverlay");

// Cliquez sur le bouton pour openBtn.addeventListener ("cliquez", () => {
  modal.style.display = "bloc";
});

// Cliquez sur le bouton Fermer ou Masque Lyer pour fermer la fenêtre contextuelle CloseBtn.AddeventListener ("Click", () => {
  modal.style.display = "Aucun";
});

overlay.addeventListener ("cliquez", () => {
  modal.style.display = "Aucun";
});

Vous pouvez étendre plus de fonctions au besoin, comme appuyer sur la touche ESC pour fermer la fenêtre contextuelle:

 document.addeventListener ("keydown", (e) => {
  if (e.key === "Escape" && modal.style.display === "Block") {
    modal.style.display = "Aucun";
  }
});

4. Optimisation facultative: ajoutez un peu d'animation pour rendre l'expérience plus fluide

Bien que la fenêtre contextuelle puisse être utilisée maintenant, il est un peu rigide à afficher / masquer directement. Vous pouvez utiliser CSS Animation pour le rendre plus naturel:

 .modal-contenu {
  Animation: Fadein 0.3S Factual-Out-Out;
}

@keyframes fadein {
  depuis {
    Opacité: 0;
    Transform: Translatey (-20px);
  }
  à {
    Opacité: 1;
    Transform: Translatey (0);
  }
}

De cette fa?on, chaque fois que la fenêtre contextuelle appara?t, elle aura un effet de décoloration et l'expérience utilisateur sera meilleure.

Fondamentalement, c'est tout. Vous pouvez simplement mettre ces trois pièces de code dans les fichiers HTML, CSS et JS respectivement, et vous verrez une fenêtre contextuelle de base disponible. Aucune bibliothèque supplémentaire n'est requise, adaptée à la mise en ?uvre rapide des besoins.

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!