Bab ini memperkenalkan cara mengklik tombol untuk memunculkan jendela yang terpusat, dan jendela ini memiliki efek lapisan masking tembus cahaya. , kode yang diperkenalkan di bawah ini dapat dengan mudah menerapkan adik ipar ini.
Kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<meta name = "penulis" konten = "http://www.softwhy.com/"/>
<title> suku semut </iteme>
<type style = "text/css">
#memudar {
Tampilan: Tidak Ada;
Posisi: Absolute;
Atas: 0%;
Kiri: 0%;
Lebar: 100%;
Tinggi: 100%;
Latar Belakang: Hitam;
z-index: 1001;
-Moz-opacity: 0.8;
opacity: .80;
filter: alpha (opacity = 80);
}
#lampu{
Tampilan: Tidak Ada;
Posisi: Absolute;
TOP: 25%;
Kiri: 25%;
Lebar: 50%;
Tinggi: 50%;
padding: 16px;
Perbatasan: 3px oranye solid;
Latar Belakang: Putih;
z-index: 1002;
meluap: otomatis;
}
</tyle>
<type skrip = "Teks/JavaScript">
window.onload = function () {
var linkbt = document.geteLementById ("linkbt");
var light = document.geteLementById ('light');
var fade = document.geteLementById ('fade');
var closeBt = document.getElementById ("closeBt");
linkbt.onClick = function () {
light.style.display = 'block';
fade.style.display = 'block';
}
closeBt.onClick = function () {
light.style.display = 'none';
fade.style.display = 'none';
}
}
</script>
</head>
<body>
<a href = "javascript: void (0)" id = "linkbt"> klik di sini untuk membuka jendela </a>
<Div id = "Light"> <a href = "javascript: void (0)" id = "closebt"> tutup jendela </a> </div>
<Div id = "fade" "> </div>
</body>
</html>
Kode di atas menerapkan persyaratan kami, dan berikut ini secara singkat memperkenalkan proses implementasinya.
1. Prinsip Implementasi:
Secara default, lapisan topeng dan jendela tersembunyi dan tidak terlihat. Kedua elemen menggunakan penentuan posisi absolut dan mengatur nilai atribut indeks-Z dari jendela yang terpusat menjadi lebih besar dari lapisan topeng, sehingga dapat ditutupi pada lapisan topeng. Ketika tombol tutup diklik, lapisan dan jendela topeng dapat disembunyikan, dan prinsipnya kira -kira sama.