Cara menggunakan PHP dan JS untuk membatalkan pautan dalam tetingkap pop timbul dan melompat ke halaman

Dengan peningkatan kerumitan pelbagai tapak web dan aplikasi, tetingkap pop timbul telah menjadi cara interaksi yang sangat biasa. Apabila pelanggan perlu beroperasi dalam tetingkap timbul, kadangkala perlu membatalkan pautan dalam tetingkap timbul untuk melompat ke halaman, sambil memastikan tetingkap timbul masih kelihatan. Artikel ini akan memperkenalkan cara menggunakan PHP dan JS untuk mencapai fungsi ini.

Langkah 1: Buat helaian gaya

Mula-mula, kita perlu menetapkan gaya tetingkap timbul. Ini boleh dicapai melalui CSS, kita perlu menambah kod berikut di kepala:

<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>

Dalam contoh ini, kita mencipta div yang dipanggil "popup" dan menetapkannya kepada kedudukan mutlak. Kemudian kami menetapkan beberapa sifat gaya termasuk warna sempadan, isian dan warna latar belakang. Akhirnya, kami menetapkannya kepada halimunan. Div ini berfungsi sebagai bekas untuk tetingkap timbul, yang akan kami gunakan kemudian dalam JS untuk menentukan keterlihatannya.

Langkah 2: Cipta fungsi JS

Seterusnya, kita perlu mencipta fungsi JavaScript untuk mengendalikan acara klik pautan. Apabila pautan diklik, fungsi ini akan menentukan sama ada lompatan halaman perlu dibatalkan dengan menanyakan atribut href pautan sasaran. Jika pautan menghala ke halaman lain, skrip akan menghalang penyemak imbas daripada memuatkan halaman tersebut dan memaparkan kandungannya dalam pop timbul.

Berikut ialah kod untuk fungsi ini:

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

Kod ini menggunakan objek XMLHttpRequest untuk memuatkan URL yang ditentukan. Apabila permintaan selesai, kami memasukkan kandungan HTML yang diperoleh ke dalam bekas pop timbul dan memaparkannya. Akhirnya, fungsi akan kembali palsu untuk membatalkan lompatan halaman.

Langkah 3: Gunakan fungsi JS dalam fail PHP

Sekarang, kita perlu menggunakan fungsi JS yang baru kita buat dalam fail PHP. Kita boleh menjalankan fungsi JS apabila pautan diklik dengan menjana pautan yang mengandungi atribut "sasaran data".

Berikut ialah contoh coretan PHP, fail yang mengandungi fungsi JS yang dipanggil "popup.php":

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

Dalam kod ini, kami mencipta elemen pautan , elemen ini termasuk atribut "sasaran data" (menunjuk ke div yang kami buat sebelum ini) dan pengendali acara "onclick" untuk memanggil fungsi JS kami apabila pengguna mengklik pautan. Fungsi ini akan memasukkan kandungan daripada pautan sasaran ke dalam div yang kami buat sebelum ini.

Langkah 4: Uji

Kini, kami telah menyelesaikan semua kerja pengekodan. Kami boleh membuka fail PHP kami dalam pelayar dan menguji kod kami apabila pautan diklik. Jika semuanya berfungsi dengan betul, apabila kita mengklik pautan, kita sepatutnya dapat melihat kandungan URL yang ditentukan dipaparkan dalam tetingkap pop timbul dan bukannya membuka halaman baharu.

Kesimpulan

Dengan menggunakan PHP dan JS, kami boleh menambah pop timbul ke tapak web kami dengan mudah. Kami boleh menggunakan teknik ini untuk mengelakkan gangguan menyemak imbas halaman semasa pengguna semasa interaksi dan memberikan maklumat lanjut tanpa meninggalkan halaman. Di samping itu, kami boleh meningkatkan pengalaman interaktif pengguna dengan membatalkan lompatan halaman terpaut, dengan itu mengawal dan melaksanakan tingkah laku tapak web dengan lebih baik.

Atas ialah kandungan terperinci Cara menggunakan PHP dan JS untuk membatalkan pautan dalam tetingkap pop timbul dan melompat ke halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!