jquery supprime la boîte pop-up affichée-Questions et réponses frontales-php.cn

jquery supprime la boîte pop-up affichée

WBOY

Libérer： 2023-05-28 11:43:37

original

384 Les gens l'ont consulté

À mesure que les applications Web deviennent de plus en plus populaires, la manière d'interagir avec les utilisateurs évolue également constamment. Les fenêtres contextuelles constituent un moyen fiable d'inviter l'utilisateur à indiquer quelque chose auquel il doit prêter attention, de lui demander s'il doit effectuer une action ou d'afficher un message de réussite. Cependant, lorsque la couche contextuelle n'est plus nécessaire, il est préférable de la supprimer de la page pour éviter toute confusion visuelle pour les utilisateurs.

Dans cet article, nous présenterons comment utiliser jQuery pour supprimer la boîte contextuelle affichée. jQuery est une bibliothèque JavaScript largement utilisée qui est devenue l'un des outils préférés des développeurs.

Étape 1 : Ajouter du HTML et du CSS

Tout d'abord, nous devons ajouter du HTML et du CSS à la page pour créer la boîte contextuelle. Dans cet exemple, nous allons créer un simple div qui servira de popover.

Le code HTML ressemble à ceci :

<div class="popup">
  <h2>提示</h2>
  <p>欢迎来到我的网站！</p>
  <button class="close">关闭</button>
</div>

Copier après la connexion

Nous devons également ajouter des styles CSS à ce div pour le centrer sur la page et le faire ressembler à un calque contextuel.

Le code CSS ressemble à ceci :

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.popup h2 {
  font-size: 18px;
  margin-top: 0;
}

.popup p {
  margin-bottom: 0;
}

.close {
  background-color: #ccc;
  border: none;
  color: #fff;
  padding: 5px 10px;
  cursor: pointer;
  float: right;
  margin-top: 10px;
}

Copier après la connexion

Ce code CSS créera une boîte contextuelle de base dans la page et la placera au centre de la page. Il ajoute également un bouton de fermeture à la fenêtre contextuelle afin qu'elle puisse être fermée lorsque la fenêtre contextuelle n'est plus nécessaire.

Étape 2 : Afficher la popup

Maintenant que nous avons créé la popup, l'étape suivante consiste à l'afficher en cas de besoin. Pour ce faire, nous utiliserons la méthode show() de jQuery.

Le code jQuery ressemble à ceci :

$(document).ready(function() {
  $('.show-popup').click(function() {
    $('.popup').show();
  });
});

Copier après la connexion

Ce code trouvera l'élément nommé .show-popup (comme un bouton) sur la page Lorsque l'utilisateur clique sur cet élément, la boîte contextuelle s'affichera à l'aide du show(. ) méthode .

Étape 3 : Fermez la popup

Lorsque l'utilisateur a terminé l'action liée à la popup, il est préférable de la supprimer de la page. Pour ce faire, nous utiliserons la méthode remove() de jQuery.

Le code jQuery ressemble à ceci :

$(document).ready(function() {
  $('.close').click(function() {
    $('.popup').remove();
  });
});

Copier après la connexion

Ce code trouvera l'élément nommé .close (le bouton de fermeture) sur la page Lorsque l'utilisateur clique sur cet élément, la boîte contextuelle sera déplacée vers le haut de la page à l'aide de la suppression. () méthode supprimer.

Étape 4 : Code complet

Enfin, nous allons rassembler tous les extraits de code afin qu'ils créent une fenêtre contextuelle fonctionnelle.

Le code complet ressemble à ceci :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery删除显示的弹框</title>
  <style>
    .popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 20px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
      z-index: 9999;
    }

    .popup h2 {
      font-size: 18px;
      margin-top: 0;
    }

    .popup p {
      margin-bottom: 0;
    }

    .close {
      background-color: #ccc;
      border: none;
      color: #fff;
      padding: 5px 10px;
      cursor: pointer;
      float: right;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <button class="show-popup">显示弹框</button>
  <div class="popup">
    <h2>提示</h2>
    <p>欢迎来到我的网站！</p>
    <button class="close">关闭</button>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.show-popup').click(function() {
        $('.popup').show();
      });

      $('.close').click(function() {
        $('.popup').remove();
      });
    });
  </script>
</body>
</html>

Copier après la connexion

Maintenant, lorsque l'utilisateur clique sur le bouton "Afficher la popup", la popup sera affichée à l'aide de la méthode show(). Lorsque l'utilisateur clique sur le bouton de fermeture, la fenêtre contextuelle est supprimée de la page à l'aide de la méthode Remove().

Résumé

Dans cet article, nous avons appris à utiliser jQuery pour créer et supprimer une boîte contextuelle affichée. Les pop-ups sont un excellent moyen d'interagir avec les utilisateurs, mais si elles sont mal utilisées, elles peuvent dégrader l'expérience utilisateur. Il est préférable d'afficher les fenêtres contextuelles uniquement lorsque cela est nécessaire et d'utiliser jQuery pour les supprimer afin de garder la page propre et facile à utiliser.

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!