Comment cliquer sur l'arrière-plan pour afficher et masquer dans jquery

Avec les progrès continus de la technologie Internet, l'interactivité dans la conception Web devient de plus en plus importante. Parmi eux, les effets spéciaux tels que « cliquer sur l'arrière-plan pour afficher/masquer » sont devenus une méthode d'interaction très pratique dans la conception Web. La réalisation de cet effet spécial repose principalement sur jQuery, une puissante librairie JavaScript.

Alors, comment obtenir l'effet de cliquer sur l'arrière-plan pour l'afficher/masquer ? Ci-dessous, nous présenterons étape par étape les étapes et précautions spécifiques.

Étape 1 : Configurer le code HTML et CSS de base

Tout d'abord, nous devons créer une boîte modale et un calque de masque semi-transparent dans le HTML. Parmi eux, l'attribut CSS de la boîte modale est "display:none", ce qui signifie que la boîte modale n'est pas visible par défaut. L'attribut CSS du calque de masque est "display:block", ce qui signifie que le calque de masque est visible par défaut :

<div class="mask"></div>
<div class="modal" style="display:none;">
  <!-- 模态框内容 -->
</div>

<style>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  z-index: 1;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  padding: 20px;
  z-index: 2;
}
</style>

Étape 2 : Utilisez jQuery pour afficher/masquer l'arrière-plan au clic

Ensuite, nous devons utiliser le Bibliothèque jQuery pour implémenter les clics en arrière-plan afficher/masquer les effets spéciaux. Plus précisément, nous pouvons transmettre le code suivant :

$(".mask").click(function () {
  $(".modal").hide();  // 隐藏模态框
  $(this).hide();      // 隐藏遮罩层
});

$(".modal").click(function (event) {
  event.stopPropagation(); // 阻止事件冒泡
});

$(".show-modal").click(function () {
  $(".modal").show();  // 显示模态框
  $(".mask").show();   // 显示遮罩层
});

Étape 3 : Analyse étape par étape du code

Tout d'abord, nous ajoutons un événement "clic" au calque de masque. Lorsque l'utilisateur clique sur le calque de masque, les opérations suivantes sont effectuées. sera effectué :

• Masquer la boîte modale ($(".modal").hide())
• Masquer le calque de masque ($(this).hide())

En même temps, nous devez faire attention au moment où l'utilisateur clique. Lorsque vous utilisez une boîte modale, vous ne voulez pas que l'intégralité de l'effet spécial soit désactivée. Par conséquent, nous devons ajouter un événement « clic » au modal et empêcher l'événement de bouillonner (event.stopPropagation()).

Enfin, nous devons ajouter un événement "clic" au bouton "Afficher la boîte modale". Lorsque l'utilisateur clique sur le bouton, la boîte modale et le calque de masque seront affichés.

Étape 4 : Quelques notes sur les styles CSS

Dans le processus de réalisation de cet effet spécial, le paramétrage des styles CSS est également très critique. Ci-dessous, nous énumérons quelques détails qui nécessitent une attention particulière :

• Le calque de masque doit être réglé sur un positionnement "fixe" pour garantir que la position du calque de masque ne changera pas lors du défilement de la page.
• La méthode de positionnement de la boîte modale doit être "fixe", ce qui garantit que la boîte modale est toujours au centre de l'écran.
• La valeur z-index du calque de masque et de la boîte modale doit être supérieure à la valeur z-index des autres éléments pour garantir qu'elle est toujours au premier plan.

En bref, cliquer sur l'arrière-plan pour afficher/masquer cet effet spécial est très pratique en conception Web et peut offrir aux utilisateurs une meilleure expérience interactive. Pendant le processus d'implémentation, nous pouvons utiliser la bibliothèque jQuery pour implémenter rapidement cet effet spécial, et nous devons également faire attention aux paramètres de style CSS. J'espère que cet article pourra être utile à la majorité des concepteurs de sites Web.

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!