Prinsip menggunakan pop-up div untuk menampilkan konten secara dinamis: Pertama, gunakan CSS dan HTML untuk menyembunyikan konten di pop-up, dan kemudian gunakan JavaScript (jQuery dalam tutorial ini) untuk menampilkannya secara dinamis. Efek ini tidak hanya memanfaatkan sepenuhnya ruang tata letak terbatas, tetapi juga meningkatkan pengalaman pengguna; Lebih penting lagi, itu tidak mempengaruhi efek SEO (karena sebenarnya ada di halaman, tetapi awalnya tidak terlihat)
1. Tentukan div di halaman HTML dan terapkan apa yang perlu kita tampilkan di div.
Salinan kode adalah sebagai berikut:
<body>
<Div id = "Login">
<h2> <img src = "gambar/close.png"/> Login situs web </h2>
<Form id = "LoginForm">
<div> </div>
<div> akun: <input type = "text" name = "user" /> </div>
<div> Kata sandi: <input type = "password" name = "pass" /> < /div>
<div> <input type = "tombol" name = "sub" value = "" /> < /div>
</form>
<div> Daftarkan Pengguna Baru | Lupa kata sandi Anda? </div>
</div>
</body>
Satu gambar bernilai ribuan kata. Mari kita lihat tangkapan layar efek dari jendela pop-up div ini:
2. Gaya CSS yang saya gunakan
Salinan kode adalah sebagai berikut:
#login {
Lebar: 350px;
Tinggi: 250px;
Perbatasan: 1px solid #ccc;
Posisi: Absolute;
Tampilan: Blok;
z-index: 9999;
Latar belakang: #FFF;
}
#login h2 {
Tinggi: 40px;
Line-Height: 40px;
Teks-Align: tengah;
Ukuran font: 14px;
spasi surat: 1px;
Warna:#666;
latar belakang: url (gambar/login_header.png) ulangi-x;
Margin: 0;
Padding: 0;
Border-Bottom: 1px solid #CCC;
Kursor: Pindah;
}
#login h2 img {
float: benar;
Posisi: kerabat;
Atas: 14px;
Kanan: 8px;
kursor: pointer;
}
#login div.info {
Padding: 10px 0 5px 0;
Teks-Align: tengah;
Warna: Maroon;
}
#login div.user, #login div.pass {
Ukuran font: 14px;
Warna:#666;
Padding: 5px 0;
Teks-Align: tengah;
}
#login input.text {
Lebar: 200px;
Tinggi: 25px;
Perbatasan: 1px solid #ccc;
Latar belakang: #FFF;
Ukuran font: 14px;
}
#login .button {
Teks-Align: tengah;
Padding: 15px 0;
}
#login input.submit {
Lebar: 107px;
Tinggi: 30px;
Latar belakang: URL (gambar/login_button.png) tidak-repeat;
Perbatasan: Tidak Ada;
kursor: pointer;
}
#login .other {
Teks-Align: Benar;
padding: 15px 10px;
Warna:#666;
}
Hal utama yang perlu diperhatikan di sini adalah definisi gaya Div, karena kita perlu menampilkan pusat, kita menggunakan posisi penentuan posisi absolut: absolut; Kedua, karena itu adalah lapisan pop-up, div harus berada di pinggiran terluar, sehingga indeks z biasanya diatur ke sangat besar, di sini kita mengaturnya ke z-index: 9999; Poin lain adalah bahwa div itu sendiri disembunyikan dan perlu diatur untuk ditampilkan: tidak ada, tetapi di sini kita perlu secara langsung melihat efeknya, sehingga kita dapat secara langsung menampilkannya menggunakan tampilan: blok;
3. Kita harus membiarkannya ditampilkan di pusat, jadi pertama -tama kita harus mendapatkan tinggi dan lebar browser. Jika ada offset horizontal atau vertikal dari bilah gulir, kita juga perlu mendapatkan panjang dan mendapatkan posisi div ke browser melalui perhitungan.
Salinan kode adalah sebagai berikut:
$ (dokumen) .ready (function ()
{
jQuery.fn.extend ({
Pusat: Fungsi (Lebar, Tinggi)
{
return $ (this) .css ("kiri", ($ (window) .width ()-width)/2+$ (window) .scrollleft ()).
css ("atas", ($ (jendela) .height ()-tinggi)/2+$ (jendela) .scrolltop ()).
CSS ("lebar", lebar).
CSS ("Tinggi", Tinggi);
}
});
});
Biarkan ditampilkan dengan mengklik tombol
Salinan kode adalah sebagai berikut:
$ (". Login"). Klik (Function ()
{
$ ("#Login"). Show (). Center (350.250); // Tampilkan kotak login
});
Diagram reproduksi
4. Dapat menyeret dan menjatuhkan bingkai pop-up
Implementasi Kode
Salinan kode adalah sebagai berikut:
$ (dokumen) .ready (function ()
{
jQuery.fn.extend ({
// Fungsi Seret dan Jatuhkan
seret: function () {
var $ tar = $ (ini);
return $ (this) .mousedown (function (e) {
if (e.target.tagname == "h2") {
var diffx = e.clientx - $ tar.offset (). Kiri;
var diffy = e.clienty - $ tar.Offset (). Top;
$ (dokumen) .mouseMove (function (e) {
var left = e.clientx - diffx;
var top = e.clienty - berbeda;
if (kiri <0) {
kiri = 0;
}
lain jika (kiri <= $ (window) .scrollleft ()) {
kiri = $ (jendela) .scrollleft ();
}
lain if (left> $ (window) .width () +$ (window) .scrollleft () - $ tar.width ()) {
kiri = $ (window) .width () +$ (window) .scrollleft () -$ tar.width ();
}
if (top <0) {
atas = 0;
}
lain if (top <= $ (window) .scrollTop ()) {
top = $ (window) .scrolltop ();
}
lain if (top> $ (window) .height () +$ (window) .scrolltop () - $ tar.height ()) {
top = $ (window) .height () +$ (window) .scrolltop () - $ tar.height ();
}
$ tar.css ("kiri", kiri + 'px'). css ("atas", top + 'px');
});
}
$ (dokumen) .mouseUp (function () {
$ (ini) .unbind ("mousemove");
$ (ini) .unbind ("mouseup")
});
});
}
});
});
Di sini kami hanya mengklik dan menyeret elemen H2 dalam konten Div. Jika div global diperlukan, itu dapat dimodifikasi. Prinsip Seret: Ketika mouse menekan elemen yang ditentukan, dapatkan koordinat titik mouse, dan melalui perhitungan, gambar juga dipindahkan ke posisi yang sesuai. Setelah mouse klik untuk membatalkan, acara pers yang sesuai akan dibatalkan dan halaman masih.
Panggil metode seret
Salinan kode adalah sebagai berikut:
$ ("#login"). drag ();
Sekarang kita dapat mengklik judul bilah kotak pop-up dan menyeretnya di browser sesuka hati.