Muat semula halaman selepas menutup tetingkap pop timbul jquery

Dalam pembangunan web, tetingkap timbul sering digunakan untuk memaparkan beberapa maklumat penting kepada pengguna atau membenarkan pengguna melakukan beberapa operasi. Menggunakan pemalam pop timbul jQuery boleh menjadikan tetingkap pop timbul lebih mudah dibuat. Walau bagaimanapun, sebaik sahaja tetingkap pop timbul ditutup, halaman tidak dimuat semula secara automatik Saya percaya ramai pembangun telah menghadapi masalah ini. Artikel ini akan memperkenalkan cara menggunakan pemalam pop timbul jQuery untuk membuat halaman dimuat semula secara automatik selepas tetingkap pop timbul ditutup.

1. Penggunaan pemalam pop timbul jQuery

Terdapat banyak jenis pemalam pop timbul jQuery, antaranya yang lebih biasa digunakan ialah Layer, Bootstrap Modal, Sweet Makluman, dsb. Mengambil Lapisan sebagai contoh, anda perlu memperkenalkan perpustakaan jQuery dan fail CSS dan JS Layer sebelum digunakan.

<link rel="stylesheet" href="path/layer.css"/>
<script src="path/jquery.min.js"></script>
<script src="path/layer.js"></script>

Seterusnya, gunakan kod berikut untuk mencipta tetingkap pop timbul mudah:

layer.open({
    title: '提示',
    content: '这是一条提示信息'
});

Ini mencipta tetingkap timbul dengan tajuk "Prompt" dan kandungan "This is a prompt mesej" Tetingkap timbul. Walau bagaimanapun, apabila pengguna menutup tetingkap pop timbul, halaman tidak akan dimuat semula secara automatik, yang memerlukan kami menulis kod yang sepadan.

2. Penyelesaian

Terdapat banyak penyelesaian untuk menyegarkan halaman selepas menutup tetingkap pop timbul Seterusnya, saya akan memperkenalkan anda kepada beberapa kaedah biasa.

1 Gunakan kaedah location.reload()

Kaedah location.reload() boleh memuat semula halaman semasa, jadi kami boleh menggunakan kaedah ini untuk memuat semula halaman dalam pop timbul. acara tutup tingkap. Kod khusus adalah seperti berikut:

layer.open({
    title: '提示',
    content: '这是一条提示信息',
    end: function () {
        location.reload();
    }
});

Di sini, kami menggunakan atribut akhir tetingkap timbul untuk mengikat fungsi panggil balik. Apabila pengguna menutup tetingkap pop timbul, fungsi ini akan dilaksanakan untuk menyegarkan halaman.

Perlu diambil perhatian bahawa menggunakan kaedah location.reload() akan memuat semula semua sumber, termasuk JavaScript, CSS, imej, dll. Jika terdapat beberapa sumber yang besar dalam halaman, kelajuan muat semula halaman akan menjadi lebih perlahan Oleh itu ia perlu digunakan dengan berhati-hati.

2. Gunakan kaedah location.href

Kaedah location.href boleh melompat ke URL baharu, tetapi jika anda melompat ke URL halaman semasa, halaman itu boleh dimuat semula. Kod khusus adalah seperti berikut:

layer.open({
    title: '提示',
    content: '这是一条提示信息',
    end: function () {
        location.href = location.href;
    }
});

Di sini, kami juga menggunakan atribut akhir tetingkap timbul untuk mengikat fungsi panggil balik dan menggunakan kaedah location.href dalam fungsi ini untuk melompat ke URL halaman semasa, dengan itu menyedari penyegaran halaman.

Perlu diambil perhatian bahawa menggunakan kaedah location.href akan melompat ke URL baharu sama seperti mengklik pautan Jika terdapat beberapa data yang belum disimpan di halaman sebelumnya, ia mungkin menyebabkan kehilangan data, begitu juga perlu Gunakan dengan berhati-hati.

3. Gunakan kaedah location.replace

Kaedah location.replace boleh menggantikan halaman semasa dengan URL yang ditentukan, yang juga boleh memuatkan semula halaman. Kod khusus adalah seperti berikut:

layer.open({
    title: '提示',
    content: '这是一条提示信息',
    end: function () {
        location.replace(location.href);
    }
});

Begitu juga, kami juga menggunakan atribut akhir tetingkap timbul untuk mengikat fungsi panggil balik dan menggunakan kaedah location.replace dalam fungsi ini untuk menggantikan halaman semasa dengan URL halaman semasa, dengan itu Laksanakan muat semula halaman.

Perlu diambil perhatian bahawa menggunakan kaedah location.replace akan menggantikan rekod sejarah halaman semasa Pengguna tidak boleh menggunakan butang belakang penyemak imbas untuk kembali ke halaman sebelumnya, jadi ia juga perlu digunakan dengan berhati-hati .

Perkara di atas ialah penyelesaian untuk menggunakan pemalam pop timbul jQuery untuk membolehkan halaman dimuat semula secara automatik selepas tetingkap pop timbul ditutup. Sudah tentu, terdapat banyak cara lain untuk mencapai fungsi ini, dan anda perlu memilih mengikut situasi sebenar.

Atas ialah kandungan terperinci Muat semula halaman selepas menutup tetingkap pop timbul jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!