Efek: Ketika pengguna menggunakan sistem Windows ditutup, antarmuka yang muncul hanya memungkinkan pengguna untuk memilih shutdown, keluar atau membatalkan tindakan, sementara program di desktop tidak dapat digunakan, dan layar berwarna abu -abu. Efek shutdown Windows ditunjukkan pada Gambar 22.1.
Manfaat menggunakan efek ini pada halaman web: Apa manfaat menggunakan efek shutdown ini pada halaman web? Pertama, setelah mengklik tautan, tindakan yang tidak tersedia untuk pengguna saat ini disembunyikan di latar belakang, dan tindakan yang tersedia ditempatkan di bagian atas layar dan disorot, yang dapat menghindari kesalahan operasi pengguna. Kedua, menyoroti informasi juga dapat mengingatkan pengguna tentang hal -hal yang harus diperhatikan.
Prinsip: Prinsip pencapaian efek ini di halaman web sangat sederhana. Buat dua lapisan, satu sebagai lapisan naungan, menutupi seluruh halaman dan ditampilkan dalam warna abu -abu; Lapisan lain berfungsi sebagai bagian yang disorot, di atas lapisan naungan, yang dapat diatur dengan mengatur properti indeks z lapisan. Ketika efek shutdown dibatalkan, cukup hapus dua elemen lapisan ini di halaman.
Kode:
<Html>
<head>
<title> efek shutdown Ajax </iteme>
<styletype = text/css>
#lightbox {/*Lapisan ini adalah lapisan highlight*/
Border-Right:#ffff1pxsolid;
Border-top:#ffff1pxsolid;
Tampilan: Blok;
Z-index: 9999;/*Setel lapisan ini di bagian atas halaman web, atur cukup besar*/
Latar Belakang:#fdfce9;/*Tetapkan warna latar belakang*/
Kiri: 50%;
Margin: -220px0px0px-250px;
Border-left:#fffff1pxsolid;
Lebar: 500px;
Border-bottom:#ffff1pxsolid;
Posisi: Absolute;
Atas: 50%;
Tinggi: 400px;
Teks-Align: Kiri
}
#Overlay {/*Lapisan ini adalah lapisan penutup*/
Tampilan: Blok;
Z-index: 9998;/*Tetapkan bagian bawah lapisan highlight*/
Filter: alpha (opacity = 20);/*diatur ke transparan*/
Kiri: 0px;
Lebar: 100%;
Posisi: Absolute;
Atas: 0px;
Tinggi: 100%;
Latar Belakang:#000;
Moz-Opacity: 0.8;
Opacity: .80
}
</tyle>
</head>
<body>
<ahref = http: //www.baidu.comTarget=_Blank> Baidu </a>
<!-Lapisan ini adalah lapisan penutup->
<Divid = overlay> </div>
<!-Lapisan ini adalah lapisan highlight->
<Divid = lightbox> <ahref =#onclick = javascript: f ()> tutup </a> & nbsp; <ahref =#onclick = javascript: f1 ()> buka </a> </div>
</body>
</html>
<script>
functionf ()
{
document.geteLementById (overlay) .style.display = tidak ada;
}
functionf1 ()
{
document.geteLementById (overlay) .style.display = block;
}
</script>
CATATAN: Jika ada tag <cooting> di browser IE, tag tidak dapat ditimpa oleh lapisan yang ditimpa, tetapi dapat ditimpa di browser lain. Gambar 22.3 menunjukkan efek dari tag <CILT> di browser IE, dan Gambar 22.4 menunjukkan efek dari tag <CILT> di mozzilafirefox.
GAMBAR 22.3 Tag <COCLET> di browser IE
Gambar 22.4 Tag <CILLET> di browser Mozzilafirefox
Jadi saat menggunakan IE Browser, Anda harus terlebih dahulu menyembunyikan elemen <CILLET> di halaman web. Misalnya, kode berikut dapat digunakan untuk menyembunyikan semua elemen <CILT> dari halaman.
selects = document.getElementsbyTagname ('select');
untuk (i = 0; i <silsects.length; i ++) {
memilih [i] .style.visibility = visibilitas;
}