Dapat dikatakan bahwa setelah saya memahami "ular" sebelumnya, fungsi ini benar -benar jauh lebih sulit daripada yang saya bayangkan di awal. Tentu saja, metode ini diduga rumit, dan pada akhirnya fungsi telah diimplementasikan. Mari kita menganalisis dan mengaturnya.
1. Prinsip Implementasi
Prinsip implementasi artikel ini adalah sebagai berikut:
* Faktanya, lapisan pop-up, lapisan topeng dan tampilan halaman asli masing-masing adalah tiga div yang berbeda
* Tingkat lapisan pop-up berada di atas lapisan topeng, dan level lapisan topeng berada di atas tampilan halaman asli;
* Lapisan topeng memiliki efek yang jelas
* Lapisan topeng tidak memiliki makna praktis, sehingga tidak perlu ditulis pada bagian html. Tentu saja, itu juga dapat direalisasikan setelah menulis.
2. Implementasi Kode
Bahasa HTML adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<Html>
...
<body>
<senter>
<div> <input type = "tombol" value = "go" ontClick = "show ()"> </div>
<div id = "waspada" style = "display: none;">
<sorm>
Masuk
<input type = "text"> <input type = "password"> <input type = "kirim" value = "login">
</form>
</div>
</penter>
</body>
</html>
JavaScript mengimplementasikan lapisan pop-up dan lapisan topeng:
Salinan kode adalah sebagai berikut:
<span style = "font-size: 12px;"> function show () {
var alertPart = document.getElementById ("alert");
alertpart.style.display = "block";
alertpart.style.position = "absolute";
alertpart.style.top = "50%";
alertpart.style.left = "50%";
alertpart.style.margintop = "-75px";
alertpart.style.marginleft = "-150px";
alertpart.style.background = "cyan";
alertpart.style.width = "300px";
alertpart.style.height = "200px";
alertpart.style.zindex = "501";
var mybg = document.createElement ("div");
mybg.setAttribute ("id", "mybg");
mybg.style.background = "#000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "absolute";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zindex = "500";
mybg.style.opacity = "0.3";
mybg.style.filter = "alpha (opacity = 30)";
Document.Body.AppendChild (MYBG);
document.body.style.overflow = "tersembunyi";
}
</script> </span>
Di sini kita menggunakan z-index untuk membedakan hierarki, opacity dan filter: alpha (opacity =) transparansi, document.createElement ("div") dan document.body.appendchild (), ini semua digunakan sebelumnya, sehingga kita dapat mencapainya. Bahkan, ketika prinsip dipahami, semuanya akan jauh lebih mudah.
Jalannya panjang dan sulit