Popup-Box-Sprung in JQuery

Mit der kontinuierlichen Weiterentwicklung der Webtechnologie werden Popup-Sprünge zunehmend in der Frontend-Entwicklung eingesetzt. Unter anderem gefällt vielen Entwicklern der Popup-Sprungeffekt von jQuery. In diesem Artikel werden die spezifischen Schritte und praktischen Demonstrationen von jQuery zur Implementierung von Popup-Sprüngen vorgestellt.

1. Übersicht über den Popup-Sprung

Bop-up wird normalerweise verwendet, um ein Eingabeaufforderungsfeld auf der aktuellen Seite anzuzeigen, um einige Informationen anzuzeigen oder den Benutzer daran zu erinnern, einen Vorgang auszuführen. Springen bedeutet, dass Sie beim Klicken auf eine Schaltfläche oder einen Link im Eingabeaufforderungsfeld direkt zur entsprechenden Seite springen. Der Vorteil des Popup-Sprungs besteht darin, dass er das Benutzerinteraktionserlebnis verbessern und den Sprungeffekt erzielen kann, ohne die aktuelle Seite zu verlassen.

2. Schritte für jQuery zum Implementieren des Popup-Box-Sprungs

jQuery implementiert die Popup-Box-Funktion durch Aufrufen der dialog()-Methode und implementiert die Seitensprungfunktion durch Aufrufen der window.location.href()-Methode. Die spezifischen Schritte sind wie folgt:

1. Stellen Sie die jQuery-Bibliothek vor.

Bevor Sie den jQuery-Popup-Box-Sprung implementieren, müssen Sie zuerst die jQuery-Bibliothek vorstellen. Es kann im Header-Skript-Tag eingeführt werden:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. Erstellen Sie einen Popup-Frame.

Verwenden Sie die Methode dialog() im jQuery-UI-Plug-in, um einen Popup-Frame zu erstellen, und Sie können die Elemente anpassen und Stile im Popup-Rahmen. Erstellen Sie beispielsweise ein einfaches Popup-Feld:

<div id="dialog-box">
  <p>这是一个弹框</p>
  <a href="#" class="btn">跳转</a>
</div>

<script>
$("#dialog-box").dialog({
  autoOpen:false,
  modal:true,
  buttons:{
    "确定":function(){
      $(this).dialog("close");
    }
  }
});
</script>

Im obigen Code ist das Attribut autoOpen auf false gesetzt, um das Popup-Feld nicht automatisch zu öffnen, sodass das modale Attribut auf true gesetzt ist, wenn der Bereich außerhalb des Wird auf das Popup-Feld geklickt, wird das Popup-Feld nicht geschlossen; das Schaltflächenattribut Sie können die Schaltflächen im Popup-Feld anpassen.

3. Rufen Sie window.location.href im Popup-Feld auf, um zu springen.

Fügen Sie eine Schaltfläche oder einen Link im Popup-Feld hinzu und rufen Sie window.location.href im Klickereignis der Schaltfläche oder des Links auf, um den Vorgang abzuschließen der Seitensprung. Fügen Sie beispielsweise der obigen Popup-Box eine Schaltfläche „Springen“ hinzu:

<a href="#" class="btn">跳转</a>

<script>
$(".btn").click(function(){
  window.location.href = "http://www.example.com";
});

3. Beispiel für einen Sprung einer jQuery-Popup-Box

Das Folgende ist ein vollständiges Beispiel für einen Sprung einer jQuery-Popup-Box, das zeigt, wie ein Pop erstellt wird -up-Feld und Popup-Fenster Springen zu einer neuen Seite im Feld:

  
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  
  


  

    
确定要离开该页面吗？
    确定
  

  <script>
    $("#dialog-box").dialog({
      autoOpen:false,
      modal:true,
      buttons:{
        "取消":function(){
          $(this).dialog("close");
        }
      }
    });

    $(".btn").click(function(){
      window.location.href = "http://www.example.com";
    });

    window.onbeforeunload = function(){
      $("#dialog-box").dialog("open");
    };
  </script>

In diesem Beispiel wird ein Bestätigungsfeld angezeigt, wenn der Benutzer versucht, die aktuelle Seite zu verlassen. Wenn der Benutzer auf die Schaltfläche „OK“ klickt, wird er zur Seite „example.com“ weitergeleitet. Wenn der Benutzer auf die Schaltfläche „Abbrechen“ klickt, wird das Popup-Fenster geschlossen und verbleibt auf der aktuellen Seite.

Zusammenfassung

In diesem Artikel werden die Schritte und Beispieldemonstrationen von jQuery zur Implementierung von Popup-Box-Sprüngen kurz vorgestellt. Die Verwendung von Popup-Boxen zum Springen kann das Benutzerinteraktionserlebnis verbessern und den Benutzern Komfort bieten. Front-End-Entwickler müssen die Kenntnisse des jQuery-Popup-Sprungs verstehen und beherrschen.

Das obige ist der detaillierte Inhalt vonPopup-Box-Sprung in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!