Bagaimana untuk melaksanakan lapisan pop timbul div dalam kemahiran js_javascript

Contoh dalam artikel ini menerangkan kaedah melaksanakan lapisan pop timbul div dalam js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Dikatakan bahawa kini pelbagai pemalam telah keluar, ia sangat mudah untuk melaksanakan lapisan pop timbul, tetapi kadang-kadang saya merasakan bahawa pemalam itu tidak praktikal dan sering mencari beberapa ekologi asli js tulen . Izinkan saya berkongsi dengan anda lapisan pop timbul js div, rakan yang memerlukan boleh lihat.

Tidak perlu bercakap lebih lanjut tentang perkara ini, hanya hantar kod dan komen:

Salin kod Kod adalah seperti berikut:

/*
* Timbul lapisan DIV
*/
fungsi showDiv()
{
var Idiv = document.getElementById("Idiv");
var mou_head = document.getElementById('mou_head');
Idiv.style.display = "block";
//Bahagian berikut perlu memusatkan lapisan pop timbul
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";

//Bahagian berikut menjadikan keseluruhan halaman berwarna kelabu dan tidak boleh diklik
var procbg = document.createElement("div"); //Buat dahulu div
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)";
//Halaman penambahan lapisan latar belakang
document.body.appendChild(procbg);
document.body.style.overflow = "tersembunyi"; //Batalkan bar skrol

//Bahagian berikut melaksanakan kesan seretan lapisan pop timbul
var posX;
var posY;
mou_head.onmousedown=function(e)
{
if(!e) e = window.event; //IE
posX = e.clientX - parseInt(Idiv.style.left);
posY = e.clientY - parseInt(Idiv.style.top);
document.onmousemove = mousemove;
}
document.onmouseup = function()
{
document.onmousemove = null;
}
fungsi mousemove(ev)
{
if(ev==null) ev = window.event;//IE
Idiv.style.left = (ev.clientX - posX) "px";
Idiv.style.top = (ev.clientY - posY) "px";
}
}
function closeDiv() //Tutup lapisan pop timbul
{
var Idiv=document.getElementById("Idiv");
Idiv.style.display="none";
document.body.style.overflow = "auto"; //Pulihkan bar skrol halaman
var body = document.getElementsByTagName("body");
var mybg = document.getElementById("mybg");
badan[0].buang Kanak-kanak(mybg);
}

Ini digunakan untuk melaksanakan lapisan seret

Bagi beberapa kesan pengindahan, anda boleh mengubah suainya sendiri.

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