Kaedah CSS JS untuk mencapai kemahiran effect_javascript topeng telus kelabu dan hitam skrin penuh pop timbul

Contoh dalam artikel ini menerangkan kaedah menggunakan CSS js untuk memaparkan kesan topeng lutsinar kelabu-hitam skrin penuh. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Kesan ini ditemui pada banyak tapak web Selepas operasi tertentu dilakukan, topeng lut cahaya kelabu-hitam akan muncul, di mana kandungan yang dinyatakan boleh dikendalikan, sebagai contoh, kotak log masuk boleh muncul, mari perkenalkan bagaimana untuk mencapai kesan ini Contoh kod adalah seperti berikut:

Klik untuk menutup

Script Home mengalu-alukan anda, Klik untuk muncul topeng

Perkara di atas melaksanakan fungsi topeng asas Apabila anda mengklik untuk muncul topeng, objek akan muncul Apabila anda mengklik untuk menutupnya, kesan topeng hilang. Begini cara untuk mencapai kesan ini:


Prinsip pelaksanaan:


Buat div skrin penuh, gunakan kedudukan mutlak, supaya ia boleh dipisahkan daripada aliran dokumen dan tidak akan menjejaskan elemen lain, dan tetapkannya kepada keadaan separa telus Sudah tentu, ketelusan ini boleh dilaraskan pada akan. Cipta elemen log masuk, yang juga menggunakan kedudukan mutlak, dan menetapkan nilai atribut indeks-znya menjadi lebih besar daripada div pada skrin pada masa ini, ia tidak akan diliputi oleh div skrin penuh. Secara lalai, nilai atribut paparan kedua-dua div ini adalah tiada. Nilai atribut paparan mereka boleh ditukar apabila butang yang sepadan diklik.


Cadangan:
Tulis kod dengan tangan sebanyak mungkin, yang boleh meningkatkan kecekapan dan kedalaman pembelajaran dengan berkesan.

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan web semua orang.