So verwenden Sie PHP und JS, um den Link im Popup-Fenster abzubrechen und zur Seite zu springen

Mit der zunehmenden Komplexität verschiedener Websites und Anwendungen sind Popup-Fenster zu einer sehr verbreiteten Interaktionsmethode geworden. Wenn der Client in einem Popup-Fenster arbeiten muss, ist es manchmal erforderlich, den Link im Popup-Fenster zu löschen, um zur Seite zu springen, während das Popup-Fenster weiterhin sichtbar bleibt. In diesem Artikel wird erläutert, wie Sie PHP und JS verwenden, um diese Funktion zu erreichen.

Schritt 1: Erstellen Sie ein Stylesheet

Zuerst müssen wir den Stil des Popup-Fensters festlegen. Dies kann durch CSS erreicht werden, wir müssen den folgenden Code im Kopf hinzufügen:

<style type="text/css">
#popup {
position:absolute;
left:0;
top:0;
z-index:99999;
background:#FFF;
border:2px solid #000;
padding:20px;
display:none;
}
</style>

In diesem Beispiel erstellen wir ein Div namens „Popup“ und stellen es auf absolute Positionierung ein. Dann legen wir einige Stileigenschaften fest, einschließlich Rahmenfarbe, Füll- und Hintergrundfarbe. Schließlich stellen wir es auf unsichtbar. Dieses Div dient als Container für das Popup, das wir später in JS verwenden werden, um seine Sichtbarkeit zu bestimmen.

Schritt 2: Erstellen Sie eine JS-Funktion

Als nächstes müssen wir eine JavaScript-Funktion erstellen, um das Klickereignis des Links zu verarbeiten. Wenn auf den Link geklickt wird, ermittelt diese Funktion, ob der Seitensprung abgebrochen werden muss, indem sie das href-Attribut des Ziellinks abfragt. Wenn der Link auf eine andere Seite verweist, verhindert das Skript, dass der Browser diese Seite lädt und zeigt ihren Inhalt in einem Popup an.

Hier ist der Code für diese Funktion:

function popup(url) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("popup").innerHTML = this.responseText;
        document.getElementById("popup").style.display = "block";
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
    return false;
}

Dieser Code verwendet das XMLHttpRequest-Objekt, um die angegebene URL zu laden. Wenn die Anfrage abgeschlossen ist, fügen wir den erhaltenen HTML-Inhalt in den Popup-Container ein und zeigen ihn an. Schließlich gibt die Funktion false zurück, um den Seitensprung abzubrechen.

Schritt 3: Verwenden Sie die JS-Funktion in der PHP-Datei

Jetzt müssen wir die JS-Funktion verwenden, die wir gerade in der PHP-Datei erstellt haben. Wir können die JS-Funktion ausführen lassen, wenn auf den Link geklickt wird, indem wir einen Link generieren, der das Attribut „data-target“ enthält.

Hier ist ein Beispiel für einen PHP-Codeausschnitt, eine Datei, die eine JS-Funktion namens „popup.php“ enthält:

<a href="http://www.example.com" onclick="return popup(this.href);" data-target="#popup">Read more</a>

In diesem Code erstellen wir ein Linkelement, das ein „data-target“-Attribut enthält (das auf die verweist). div, das wir zuvor erstellt haben) und einen „onclick“-Ereignishandler, um unsere JS-Funktion aufzurufen, wenn der Benutzer auf den Link klickt. Diese Funktion fügt den Inhalt des Ziellinks in das zuvor erstellte Div ein.

Schritt 4: Testen

Jetzt haben wir alle Codierungsarbeiten abgeschlossen. Wir können unsere PHP-Datei in einem Browser öffnen und unseren Code testen, wenn auf den Link geklickt wird. Wenn alles korrekt funktioniert, sollten wir beim Klicken auf den Link den Inhalt der angegebenen URL in einem Popup-Fenster sehen können, anstatt eine neue Seite zu öffnen.

Fazit

Durch die Verwendung von PHP und JS können wir ganz einfach Pop-ups zu unserer Website hinzufügen. Wir können diese Technik verwenden, um zu vermeiden, dass der Benutzer während der Interaktion beim Surfen auf der aktuellen Seite unterbrochen wird, und um mehr Informationen bereitzustellen, ohne die Seite zu verlassen. Darüber hinaus können wir das interaktive Erlebnis des Benutzers verbessern, indem wir verknüpfte Seitensprünge abbrechen und so das Verhalten der Website besser steuern und ausführen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie PHP und JS, um den Link im Popup-Fenster abzubrechen und zur Seite zu springen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!