jquery se ferme automatiquement après être apparu

Dans les pages Web, jquery est une bibliothèque javascript largement utilisée qui peut facilement réaliser diverses interactions et effets d'animation. Parmi elles, les boîtes contextuelles constituent une méthode d'interaction courante, qui peut guider les utilisateurs dans l'exécution d'opérations ou leur fournir des informations pertinentes. Dans des circonstances normales, les fenêtres contextuelles doivent être fermées manuellement, mais dans certains scénarios, nous devons obtenir l'effet de fermeture automatique. Cet article explique comment utiliser jquery pour réaliser la fonction de fermeture automatique des boîtes contextuelles.

1. Implémentation de base de la boîte pop-up

En jquery, nous pouvons utiliser le plug-in pop-up box ou écrire notre propre code pour obtenir l'effet de la boîte contextuelle. Ici, nous prenons comme exemple la manière d'écrire du code par nous-mêmes pour obtenir simplement l'effet d'une boîte contextuelle.

Code HTML

<button id="btn">点击弹出框</button>

<div class="mask">
  <div class="popup">
    <h3>弹出框标题</h3>
    <p>弹出框内容</p>
    <button class="close-btn">关闭</button>
  </div>
</div>

Code CSS

.mask {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6)
}

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 5px;
  text-align: center;
}

.close-btn {
  margin-top: 20px;
  padding: 5px 10px;
  border: none;
  background-color: #ff6700;
  color: #ffffff;
  border-radius: 5px;
  cursor: pointer;
}

Code JS

$(function() {
  $('#btn').click(function() {
    $('.mask').fadeIn(500);
  });
  
  $('.close-btn').click(function() {
    $('.mask').fadeOut(500);
  });
})

Grâce au code ci-dessus, nous pouvons réaliser un effet de boîte pop-up simple. Cliquez sur le bouton, un fond noir translucide apparaîtra sur la page et un cadre blanc apparaîtra. Cliquez sur le bouton de fermeture et le cadre contextuel disparaîtra. Ensuite, nous présenterons comment implémenter la fonction de fermeture automatique de la boîte contextuelle.

2. Utilisez setTimeout pour obtenir un arrêt automatique

Dans jquery, il existe une méthode setTimeout qui peut exécuter automatiquement le code après l'heure spécifiée. En utilisant cette méthode, nous pouvons réaliser la fonction de fermeture automatique de la boîte contextuelle.

Code HTML (identique à ci-dessus)

Code CSS (identique à ci-dessus)

Code JS

$(function() {
  $('#btn').click(function() {
    $('.mask').fadeIn(500);

    // 代码开始执行后，1.5秒后执行自动关闭
    setTimeout(function() {
      $('.mask').fadeOut(500);
    }, 1500);
  });
  
  $('.close-btn').click(function() {
    $('.mask').fadeOut(500);
  });
})

# 🎜🎜#In le code ci-dessus, après l'affichage de la boîte contextuelle (élément de masque fadeIn), nous réglons la minuterie et mettons le code de fermeture automatique dans la minuterie, où 1500 signifie que le code de fermeture automatique sera exécuté après 1,5 seconde (élément de masque fadeOut ). Bien sûr, nous pouvons également régler la durée plus ou moins longue pour répondre à différents besoins.

3. Utilisez l'animation d'animation pour obtenir une fermeture automatique

En plus d'utiliser la méthode setTimeout pour obtenir une fermeture automatique, nous pouvons également utiliser des effets d'animation jquery pour obtenir des effets similaires. Nous pouvons utiliser la méthode d'animation de jquery pour faire disparaître progressivement la boîte contextuelle, obtenant ainsi un effet similaire à la fermeture automatique.

Code HTML (identique à ci-dessus)

Code CSS (identique à ci-dessus)

Code JS

$(function() {
  $('#btn').click(function() {
    $('.mask').fadeIn(500);

    // 延迟1.5秒后开始执行动画
    setTimeout(function() {
      $('.popup').animate({opacity: 0});
      $('.mask').animate({opacity: 0}, function() {
        $(this).hide();
      })
    }, 1500);
  });
  
  $('.close-btn').click(function() {
    $('.mask').fadeOut(500);
  });
})

# 🎜🎜#In le code ci-dessus, nous définissons également une minuterie et la boîte de dialogue commencera à disparaître après 1,5 seconde. La disparition ici n'est pas d'utiliser directement la méthode fadeOut, mais d'utiliser la méthode animate pour changer progressivement l'attribut d'opacité (transparence) de 1 à 0. Lorsque la transparence devient 0, la fonction de rappel est appelée pour masquer l'élément de masque. Cela complète un effet similaire à l'arrêt automatique.

Résumé

Cet article explique comment utiliser jquery pour réaliser la fonction de fermeture automatique de la boîte pop-up. Nous pouvons utiliser la méthode setTimeout ou la méthode animate pour obtenir l'effet de fermeture automatique. J'espère que cet article sera utile à tout le monde.

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!