Artikel ini menjelaskan metode penerapan lapisan pop-up div oleh JS. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
Ngomong-ngomong, sangat mudah untuk menerapkan lapisan pop-up ketika berbagai plug-in dirilis. Namun, saya kadang-kadang berpikir bahwa plug-in itu tidak praktis dan sering menemukan beberapa hal asli JS murni. Izinkan saya berbagi dengan Anda contoh lapisan pop-up JS div asli. Teman yang membutuhkan bisa melihatnya.
Tak perlu dikatakan, cukup posting kode. Ada kode dan komentar:
Salin kode sebagai berikut:/*
* Pop Up The Div Layer
*/
fungsi showdiv ()
{
var idiv = document.geteLementById ("idiv");
var mou_head = document.geteLementById ('mou_head');
Idiv.style.display = "block";
// Bagian-bagian berikut harus dipusatkan untuk menampilkan lapisan pop-up
Idiv.style.left = (document.documentelement.clientwidth-idiv.clientwidth) /2+document.documentelement.scrollleft+ "px";
Idiv.style.top = (document.documentelement.clientheight-idiv.clientHeight) /2+document.documentelement.scrolltop-50+ "px";
// Bagian-bagian berikut membuat seluruh halaman Gray-Out-Clickable
var procbg = document.createelement ("div"); // Buat div terlebih dahulu
procbg.setAttribute ("id", "mybg"); // Tentukan ID div
procbg.style.background = "#000000";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "tetap";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zindex = "500";
procbg.style.opacity = "0.6";
procbg.style.filter = "alpha (opacity = 70)";
// Tambahkan lapisan latar belakang ke halaman
Document.Body.AppendChild (ProCBG);
document.body.style.overflow = "tersembunyi"; // Batalkan scrollbar
// Bagian-bagian berikut mewujudkan efek hambatan dari lapisan pop-up
var posx;
var posy;
mou_head.onmousedown = fungsi (e)
{
if (! e) e = window.event; //YAITU
posx = e.clientx - parseInt (idiv.style.left);
posy = e.clienty - parseInt (idiv.style.top);
document.onmouseMove = mousemove;
}
document.onmouseup = function ()
{
document.onmouseMove = null;
}
Function Mousemove (EV)
{
if (ev == null) ev = window.event; // yaitu
Idiv.style.left = (ev.clientx - posx) + "px";
Idiv.style.top = (ev.clienty - posy) + "px";
}
}
Function closeV () // tutup lapisan pop-up
{
var idiv = document.geteLementById ("idiv");
Idiv.style.display = "none";
document.body.style.overflow = "auto"; // Kembalikan scrollbar halaman
var body = document.getElementsbyTagname ("body");
var mybg = document.geteLementById ("mybg");
tubuh [0] .removechild (mybg);
}
<!-Lapisan pop dimulai->
<div id = "idiv" style = "display: none; Posisi: absolute; z-index: 1000; latar belakang:#67a3d9;">
<div id = "mou_head" 100px; tinggi = 10px; z-index: 1001; Posisi: Absolute; "> Ini digunakan untuk mengimplementasikan lapisan seret </div>
<input type = "tombol" value = "tutup" onClick = "closedIv ();" />
</div>
<!-end->
Adapun beberapa efek kecantikan, Anda dapat memodifikasinya sendiri.
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.