Misalkan kita mempunyai wadah penampung sebagai berikut:
Copy kode kodenya sebagai berikut:
<gaya tipe="teks/css">
#container{width:auto;height:auto; overflow:hidden;}
/*Atribut overflow:hidden; di sini terutama untuk menyetel bagian di luar container agar disembunyikan secara otomatis. Alasan mengapa atribut ini disetel adalah untuk menyelesaikan masalah kompatibilitas browser pada IE8 dan versi di bawahnya*/
</gaya>
<div id="wadah" >
</div>
Sekarang kita ingin memunculkan lapisan div di halaman web sehingga container tidak dapat dioperasikan sebelum menutup lapisan div pop-up.
Kemudian, pertama-tama kita perlu mendefinisikan lapisan div dari topeng ini sebagai berikut:
Copy kode kodenya sebagai berikut:
<div id="kontiner">
<!―Cukup masukkan lapisan masker ke dalam wadah
<divid=”shade” style=”width:1600px;height:900px;/*Beri ukuran awal pada layer mask*/”>
<masukan nama=”tutup” id=”tutup” nilai=”tutup”>
</div>
</div>
Selanjutnya, gunakan js untuk membuat layer mask selalu ditampilkan di layar dan konten di bawah layer mask tidak dapat dimanipulasi. Klik tombol close untuk menutup layer mask.
Copy kode kodenya sebagai berikut:
<skrip tipe="teks/javascript">
$(fungsi(){
//Dapatkan lebar dan tinggi internal browser saat ini
varnWidth = jendela.lebar dalam;
varnHeight = jendela.innerHeight;
//Mengatur lebar dan tinggi layer mask
$("#bayangan").lebar(nLebar);
$("#naungan").tinggi(nTinggi);
//Atur tombol tutup untuk ditampilkan di tengah
$("#close").css("margin-top",nHeight/2-50+"px");
//Mengatur kejadian yang dipicu ketika ukuran browser berubah
$(jendela).mengubah ukuran(fungsi(){
//Dapatkan lebar dan tinggi internal browser saat ini
varnWidth = jendela.lebar dalam;
varnHeight = jendela.innerHeight;
//Mengatur lebar dan tinggi layer mask
$("#bayangan").lebar(nLebar);
$("#naungan").tinggi(nTinggi);
//Atur tombol tutup untuk ditampilkan di tengah
$("#putPwd").css("margin-top",nHeight/2-50+"px");
});
//Atur tombol tutup untuk menghilangkan lapisan topeng
$("#tutup").klik(fungsi(){
$("#bayangan").removeAttr("id");
$("#bayangan").html("");
});
//Bisa juga ditulis dalam js murni
Document.getElementById(“shade”).style…….;
//Percuma untuk mengatakan lebih banyak lagi nanti. Jika Anda tertarik tetapi benar-benar tidak tahu cara menulis, Anda dapat menghubungi saya.
})
</skrip>