Artikel ini menjelaskan metode memunculkan efek topeng transparan abu-abu-hitam layar penuh oleh JS+CSS. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
Ada efek seperti itu di banyak situs web. Setelah melakukan operasi tertentu, topeng tembakan abu-abu-hitam akan muncul. Konten yang ditentukan dapat dioperasikan di atasnya, seperti kotak login dan konten lainnya. Mari kita perkenalkan cara mencapai efek ini. Contoh kode adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<meta name = "penulis" content = "// www.vevb.com/"/>
<title> cara memunculkan efek masker transparan abu-abu-hitam layar penuh-wulin.com </iteme>
<type style = "text/css">
*
{
margin: 0px;
padding: 0px;
}
.zhezhao
{
Lebar: 100%;
Tinggi: 100%;
Latar Belakang:#000;
filter: alpha (opacity = 50);
-Moz-opacity: 0,5;
Opacity: 0,5;
Posisi: Absolute;
Kiri: 0px;
Atas: 0px;
Tampilan: Tidak Ada;
z-index: 1000;
}
.login
{
Lebar: 280px;
Tinggi: 180px;
Posisi: Absolute;
TOP: 200PX;
Kiri: 50%;
Latar Belakang:#000;
margin-kiri: -140px;
Tampilan: Tidak Ada;
z-index: 1500;
}
.isi
{
margin-top: 50px;
Warna: Merah;
Line-Height: 200px;
Tinggi: 200px;
Teks-Align: tengah;
}
</tyle>
<type skrip = "Teks/JavaScript">
window.onload = function ()
{
var zhezhao = document.getElementById ("zhezhao");
var login = document.geteLementById ("login");
var bt = document.geteLementById ("bt");
var btclose = document.getElementById ("btclose");
bt.onClick = function ()
{
zhezhao.style.display = "block";
login.style.display = "block";
}
btclose.onClick = function ()
{
zhezhao.style.display = "tidak ada";
login.style.display = "none";
}
}
</script>
</head>
<body>
<Div ID = "Zhezhao"> </div>
<Div ID = "Login"> <tombol id = "btclose"> Klik untuk menutup </button> </div>
<verv> wulin.com menyambut Anda, <tombol id = "bt"> klik untuk pop up mask </button> </div>
</body>
</html>
Di atas mengimplementasikan fungsi topeng dasar. Saat mengklik untuk memunculkan topeng, suatu objek akan muncul. Saat mengklik untuk menutup, efek topeng akan hilang. Inilah cara mencapai efeknya:
Prinsip Implementasi:
Buat div layar penuh, menggunakan posisi absolut, sehingga dapat dipisahkan dari aliran dokumen, tanpa mempengaruhi elemen lain, dan mengaturnya ke keadaan tembus cahaya. Tentu saja, transparansi ini dapat disesuaikan sesuka hati, dan membuat elemen login, yang juga menggunakan penentuan posisi absolut dan membuat nilai atribut indeks z-nya lebih besar dari div pada layar, dan pada saat ini tidak akan dicakup oleh div layar penuh. Dalam keadaan default, nilai atribut tampilan dari kedua div ini tidak ada. Saat mengklik tombol yang sesuai, mereka dapat mengubah nilai atribut tampilan mereka.
Saran: Kode tulisan tangan sebanyak mungkin dapat secara efektif meningkatkan efisiensi dan kedalaman pembelajaran.
Saya harap artikel ini akan membantu pemrograman web semua orang.