jquery wird nach dem Auftauchen automatisch geschlossen

Auf Webseiten ist jquery eine weit verbreitete Javascript-Bibliothek, mit der problemlos verschiedene Interaktionen und Animationseffekte erzielt werden können. Unter diesen sind Popup-Boxen eine gängige Interaktionsmethode, die Benutzer bei der Ausführung von Vorgängen anleiten oder Benutzer mit relevanten Informationen auffordern kann. Unter normalen Umständen müssen Popup-Boxen manuell geschlossen werden. In einigen Szenarien müssen wir jedoch den automatischen Schließeffekt erzielen. In diesem Artikel wird erläutert, wie Sie mit jquery die automatische Schließfunktion von Popup-Boxen realisieren.

1. Grundlegende Implementierung der Popup-Box

In jquery können wir ein Popup-Box-Plugin verwenden oder selbst Code schreiben, um den Effekt einer Popup-Box zu erzielen. Hier nehmen wir als Beispiel die Art und Weise, wie wir selbst Code schreiben, um einfach den Effekt einer Popup-Box zu erzielen.

HTML-Code

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

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

CSS-Code

.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;
}

JS-Code

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

Mit dem obigen Code können wir einen einfachen Popup-Box-Effekt erzielen. Klicken Sie auf die Schaltfläche. Auf der Seite wird ein schwarzer, durchscheinender Hintergrund angezeigt, und ein weißer Rahmen wird angezeigt. Klicken Sie auf die Schaltfläche „Schließen“. Der Popup-Rahmen wird ausgeblendet. Als Nächstes stellen wir vor, wie die automatische Schließfunktion des Popup-Felds implementiert wird.

2. Verwenden Sie setTimeout, um ein automatisches Herunterfahren zu erreichen.

In jquery gibt es eine setTimeout-Methode, mit der der Code nach der angegebenen Zeit automatisch ausgeführt werden kann. Mit dieser Methode können wir die Funktion des automatischen Schließens des Popup-Fensters realisieren.

HTML-Code (gleicher Code wie oben)

CSS-Code (gleicher Code oben)

JS-Code

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

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

Im obigen Code stellen wir den Timer ein, nachdem das Popup-Feld angezeigt wird (Maskenelement fadeIn). ), Geben Sie den automatischen Schließcode in den Timer ein, wobei 1500 bedeutet, dass der automatische Schließcode nach 1,5 Sekunden ausgeführt wird (Maskenelement fadeOut). Selbstverständlich können wir die Zeit auch länger oder kürzer einstellen, um unterschiedlichen Bedürfnissen gerecht zu werden.

3. Verwenden Sie Animationsanimationen, um ein automatisches Schließen zu erreichen.

Zusätzlich zur Verwendung der setTimeout-Methode können wir auch JQuery-Animationseffekte verwenden, um ähnliche Effekte zu erzielen. Wir können die Animationsmethode von jquery verwenden, um das Popup-Fenster schrittweise auszublenden und so einen ähnlichen Effekt wie beim automatischen Schließen zu erzielen.

HTML-Code (gleicher Code wie oben)

CSS-Code (gleicher Code oben)

JS-Code

$(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);
  });
})

Im obigen Code stellen wir auch den Timer ein und das Popup-Fenster beginnt danach zu verschwinden 1,5 Sekunden. Das Verschwinden hier besteht nicht darin, die fadeOut-Methode direkt zu verwenden, sondern die animate-Methode zu verwenden, um das Deckkraftattribut (Transparenz) schrittweise von 1 auf 0 zu ändern. Wenn die Transparenz 0 wird, wird die Rückruffunktion aufgerufen, um das Maskenelement auszublenden. Dadurch wird ein Effekt erzielt, der dem automatischen Herunterfahren ähnelt.

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit jquery die automatische Schließfunktion des Popup-Felds realisieren. Wir können die setTimeout-Methode oder die animate-Methode verwenden, um den automatischen Schließeffekt zu erzielen. Ich hoffe, dieser Artikel ist für alle hilfreich.

Das obige ist der detaillierte Inhalt vonjquery wird nach dem Auftauchen automatisch geschlossen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!