Metode JS untuk mengimplementasikan lapisan pop-up div

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.