jquery popup fermer

Lorsque nous utilisons le plug-in pop-up jQuery dans une page Web, nous devons généralement fournir une fonction de fermeture afin que les utilisateurs puissent fermer la pop-up en cas de besoin. Cet article explique comment utiliser jQuery pour implémenter la fonction de fermeture de boîte contextuelle.

Première étape : Ajouter un bouton de fermeture

Ajouter un bouton de fermeture à la page pop-up, c'est-à-dire un élément HTML, tel qu'un bouton ou un lien. Par exemple :

<a href="#" class="close-btn">关闭</a>

Ici, nous utilisons un élément de lien avec le nom de classe "close-btn", et définissons l'attribut href du lien sur "#" afin qu'il ne renvoie pas vers d'autres pages. Vous pouvez également utiliser d'autres éléments HTML, tels que des éléments de bouton, en définissant le nom de la classe sur « close-btn ».

Étape 2 : lier l'événement de fermeture

Maintenant, nous devons utiliser jQuery pour sélectionner l'élément de bouton et lier un événement de clic pour fermer la boîte de dialogue lorsque l'utilisateur clique le bouton . Par exemple :

$('.close-btn').click(function() {
  // 关闭弹框的代码
});

Ici, nous utilisons la fonction $() pour sélectionner l'élément avec le nom de classe "close-btn", puis utilisons la méthode click() pour lier un événement de clic. Dans la fonction de rappel de l'événement click, nous devons implémenter le code pour fermer la boîte contextuelle.

Étape 3 : Fermez la boîte contextuelle

Maintenant que nous avons lié l'événement de fermeture, l'étape suivante consiste à implémenter le code de fermeture de la boîte contextuelle. Plus précisément, nous devons utiliser jQuery pour sélectionner l'élément contextuel et le masquer. Par exemple :

$('.close-btn').click(function() {
  // 隐藏弹框
  $('.dialog').hide();
});

Ici, nous sélectionnons l'élément avec le nom de classe "dialog" et le masquons à l'aide de la méthode hide(). Vous pouvez utiliser d'autres méthodes, telles que fadeOut() ou animate(), pour obtenir différents effets d'animation de clôture.

Le code complet est le suivant :

  
  
  


  显示弹框
  
  

    
这是一个弹框
    
这是弹框的内容。
    <a href="#" class="close-btn">关闭</a>
  
  
  
  <script>
    $('.show-btn').click(function() {
      $('.dialog').show();
    });
    
    $('.close-btn').click(function() {
      $('.dialog').hide();
    });
  </script>

Dans cet exemple, nous utilisons un élément bouton comme bouton pour afficher la boîte pop-up. Lorsque l'utilisateur clique sur le bouton, une fenêtre contextuelle apparaîtra avec un bouton de fermeture. Lorsque l'utilisateur clique sur le bouton de fermeture, la fenêtre contextuelle sera masquée.

Conclusion

Dans cet article, nous avons appris à utiliser jQuery pour implémenter la fonction de fermeture de pop-up. En ajoutant un bouton de fermeture et en liant l'événement de fermeture, nous pouvons obtenir une expérience contextuelle conviviale. Lorsque vous écrivez un plugin popup pour votre site Web ou votre application, n'oubliez pas d'ajouter une fonctionnalité de fermeture pour améliorer la satisfaction des utilisateurs.

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!