JQuery-Popup schließen

Wenn wir das jQuery-Popup-Plugin auf einer Webseite verwenden, müssen wir normalerweise eine Schließfunktion bereitstellen, damit Benutzer das Popup bei Bedarf schließen können. In diesem Artikel wird erläutert, wie Sie mit jQuery die Funktion zum Schließen von Popup-Boxen realisieren.

Schritt 1: Fügen Sie eine Schließen-Schaltfläche hinzu

Fügen Sie der Popup-Seite eine Schließen-Schaltfläche hinzu, bei der es sich um ein HTML-Element wie eine Schaltfläche oder einen Link handelt. Zum Beispiel:

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

Hier verwenden wir ein Link-Element mit dem Klassennamen „close-btn“ und setzen das href-Attribut des Links auf „#“, damit dieser nicht zu anderen Seiten springt. Sie können auch andere HTML-Elemente verwenden, z. B. Schaltflächenelemente, indem Sie den Klassennamen auf „close-btn“ setzen.

Schritt 2: Binden Sie das Schließereignis

Jetzt müssen wir jQuery verwenden, um das Schaltflächenelement auszuwählen und ein Klickereignis zu binden, um das Popup-Fenster zu schließen, wenn der Benutzer auf die Schaltfläche klickt. Zum Beispiel:

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

Hier verwenden wir die Funktion $(), um das Element mit dem Klassennamen „close-btn“ auszuwählen, und verwenden dann die Methode click(), um ein Klickereignis zu binden. In der Rückruffunktion des Klickereignisses müssen wir den Code implementieren, um das Popup-Fenster zu schließen.

Schritt 3: Schließen Sie die Popup-Box

Da wir nun das Schließereignis gebunden haben, besteht der nächste Schritt darin, den eigentlichen Code zum Schließen der Popup-Box zu implementieren. Insbesondere müssen wir jQuery verwenden, um das Popup-Element auszuwählen und auszublenden. Zum Beispiel:

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

Hier wählen wir das Element mit dem Klassennamen „dialog“ aus und verstecken es mit der Methode hide(). Sie können andere Methoden wie fadeOut() oder animate() verwenden, um unterschiedliche Abschlussanimationseffekte zu erzielen.

Der vollständige Code lautet wie folgt:

  
  
  


  显示弹框
  
  

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

In diesem Beispiel verwenden wir ein Schaltflächenelement als Schaltfläche zum Anzeigen des Popup-Felds. Wenn der Benutzer auf die Schaltfläche klickt, wird ein Popup mit einer Schaltfläche zum Schließen angezeigt. Wenn der Benutzer auf die Schaltfläche „Schließen“ klickt, wird das Popup ausgeblendet.

Fazit

In diesem Artikel haben wir gelernt, wie man mit jQuery die Popup-Schließfunktion implementiert. Durch das Hinzufügen einer Schließen-Schaltfläche und das Binden des Schließereignisses können wir ein benutzerfreundliches Popup-Erlebnis erreichen. Wenn Sie ein Popup-Plugin für Ihre Website oder Anwendung schreiben, denken Sie daran, das Hinzufügen einer Schließfunktion in Betracht zu ziehen, um die Benutzerzufriedenheit zu verbessern.

Das obige ist der detaillierte Inhalt vonJQuery-Popup schließen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!