Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<Html>
<head>
<Title> dokumen baru </iteme>
<meta charset = "UTF-8">
<meta http-equiv = "konten tipe" content = "text/html; charset = utf-8"/>
<Meta name = "penulis" konten = "">
<Meta name = "kata kunci" content = "">
<Meta name = "description" content = "">
<type style = "text/css">
*
{
padding: 0px;
margin: 0px;
}
#Idiv
{
Lebar: 900px;
Tinggi: otomatis;
Posisi: Absolute;
z-index: 1000;
Perbatasan: 2px solid #ffffff;
Latar Belakang: #FFFFFF;
}
</tyle>
</head>
<body>
<div id = "idiv" style = "display: none;">
<a href = "javascript: void (0)" onclick = "closedIv ()"> klik untuk menutup lapisan </a>
<br/> Perbedaan dalam Document.DocumentElement <br/> Perbedaan dalam Document.DocumentElement
</div>
<div> <a href = "javascript: void (0)" id = "show" ontClick = "show ()"> klik untuk membuka lapisan pop-up! </div>
</body>
<skrip langue = "javascript">
function show ()
{
var idiv = document.geteLementById ("idiv");
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";
//alert(document.body.scrolltop)
var aa_scrolltop = document.documentelement.scrolltop || window.pageyoffset || document.body.scrolltop;
Idiv.style.top = (document.documentelement.clientheight-idiv.clientHeight)/2+aa_scrolltop+"px";
// Ada masalah di sini. Lapisan pop-up dipusatkan ke kiri dan kanan, tetapi tinggi tidak terpusat, dan ditampilkan di bagian atas, menyebabkan satu // bagian tidak terlihat. Jadi untuk sementara tambahkan margin-top di bawah ini.
// 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)";
// Batalkan scrollbar
Document.Body.AppendChild (ProCBG);
document.body.style.overflow = "auto";
// Bagian-bagian berikut mewujudkan efek hambatan dari lapisan pop-up (jika Anda ingin memindahkan div di lapisan pop-up, cukup keluar dan hapus yang berikut)
/*
var posx;
var posy;
Idiv.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");
var mybg = document.geteLementById ("mybg");
document.body.removechild (mybg);
Idiv.style.display = "none";
document.body.style.overflow = "auto"; // kembalikan scrollbar halaman
//document.getElementById("mybg").style.display="none ";
}
</script>
</html>
// Ubah lapisan pop-up di atas dan buat fungsi pemuatan Anda sendiri. Tentukan apakah halaman telah dimuat, dan sembunyikan loading.gif setelah selesai
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> dokumen baru </iteme>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
</head>
<body onload = "subsomething ()">
</body>
<type skrip = "Teks/ecmascript">
function show (addressImg, img_w, img_h) {
// Dapatkan tinggi halaman
var h = (document.documentelement.clientHeight> document.documentelement.clientHeight)? document.documentelement.scrollheight: document.documentelement.clientHeight;
// Dapatkan lebar halaman
var w = (document.documentelement.scrollwidth> document.documentelement.clientwidth)? document.documentelement.scrollwidth: document.documentelement.scrollwidth;
var procbg = document.createelement ("div"); // Buat div terlebih dahulu
procbg.setAttribute ("id", "mybg"); // Tentukan ID div
procbg.style.background = "#555";
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)";
// Batalkan scrollbar
Document.Body.AppendChild (ProCBG);
document.body.style.overflow = "auto";
var pimg = document.createElement ("img"); // Buat IMG
pimg.setAttribute ("id", "bg_img"); // Tentukan ID div
pimg.setAttribute ("src", addressImg); // Tentukan ID div
var img_w = (w - img_w) / 2;
var img_h = (h - img_h) / 2;
pimg.style.top = img_h + "px";
pimg.style.left = img_w + "px";
pimg.style.position = "tetap";
pimg.style.opacity = "0.9";
document.geteLementById ("mybg"). AppendChild (pimg);
}
Function closeV () // tutup lapisan pop-up
{
var mybg = document.geteLementById ("mybg");
document.body.removechild (mybg);
document.body.style.overflow = "auto"; // kembalikan scrollbar halaman
//document.getElementById("mybg").style.display="none ";
}
tunjukkan ('memuat/memuat3.gif', '100', '100');
document.onreadystatechange = subsomething; // Jalankan metode ini ketika status pemuatan halaman berubah.
fungsi subsomething () {
if (document.readystate == "complete") {// masukkan saat status pemuatan halaman benar -benar berakhir
closediv ();
}
}
</script>
</html>