コードコピーは次のとおりです。
<!doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<Title>新しいドキュメント</title>
<メタcharset = "utf-8">
<Meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<Meta name = "Author" content = "">
<Meta name = "keywords" content = "">
<メタ名= "説明" content = "">
<style type = "text/css">
*
{
パディング:0px;
マージン:0px;
}
#idiv
{
幅:900px;
高さ:自動;
位置:絶対;
z-index:1000;
ボーダー:2pxソリッド#ffffff;
背景:#ffffff;
}
</style>
</head>
<body>
<div id = "idiv" style = "display:none;">
<a href = "javascript:void(0)" onclick = "closediv()">クリックしてレイヤーを閉じます</a>
<br/> document.documentelement <br/> document.documentlementの違い
</div>
<div> <a href = "javascript:void(0)" id = "show" onclick = "show()">クリックしてポップアップレイヤーを開きます! </div>
</body>
<スクリプトlangue = "javascript">
関数show()
{
var idiv = document.getElementById( "IDIV");
idiv.style.display = "block";
//ポップアップレイヤーを表示するために、次の部分を中央に配置する必要があります
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";
//ここには問題があります。ポップアップ層は左右に中央にありますが、高さは中心にあり、上部に表示され、1つの//パーツが見えなくなります。したがって、一時的にマージントップを下に追加します。
//次のパーツにより、ページ全体がグレーアウトクリック可能になります
var procbg = document.createelement( "div"); //最初にdivを作成します
procbg.setattribute( "id"、 "mybg"); // divのIDを定義します
procbg.style.background = "#000000";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "sixt";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zindex = "500";
procbg.style.opacity = "0.6";
procbg.style.filter = "alpha(ofacity = 70)";
// Scrollbarをキャンセルします
document.body.AppendChild(procbg);
document.body.style.overflow = "auto";
//次の部分は、ポップアップレイヤーのドラッグ効果を実現します(ポップアップレイヤーでDIVを移動する場合は、ログアウトして次のことを削除します)
/*
var posx;
var posy;
idiv.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;
}
機能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()//ポップアップレイヤーを閉じます
{
var idiv = document.getElementById( "IDIV");
var mybg = document.getElementById( "mybg");
document.body.removechild(mybg);
idiv.style.display = "none";
document.body.style.overflow = "auto"; //ページscrollbarを復元します
//document.getElementById("mybg").style.display="none ";
}
</script>
</html>
//上記のポップアップレイヤーを変更し、独自のロード機能を作成します。ページが読み込まれているかどうかを判断し、完了後にloading.gifを非表示にします
<!doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title>新しいドキュメント</title>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
</head>
<body onload = "subsomething()">
</body>
<script type = "text/ecmascript">
function show(adsterimg、img_w、img_h){
//ページの高さを取得します
var h =(document.documentelement.clientheight> document.documentelement.clientheight)? document.documentelement.scrollheight:document.documentelement.clientheight;
//ページ幅を取得します
var w =(document.documentelement.scrollwidth> document.documentelement.clientWidth)? document.documentelement.scrollwidth:document.documentelement.scrollwidth;
var procbg = document.createelement( "div"); //最初にdivを作成します
procbg.setattribute( "id"、 "mybg"); // divのIDを定義します
procbg.style.background = "#555";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "sixt";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zindex = "500";
procbg.style.opacity = "0.6";
procbg.style.filter = "alpha(ofacity = 70)";
// Scrollbarをキャンセルします
document.body.AppendChild(procbg);
document.body.style.overflow = "auto";
var pimg = document.createelement( "img"); // IMGを作成します
pimg.setattribute( "id"、 "bg_img"); // divのIDを定義します
pimg.setattribute( "src"、adstermg); // divのIDを定義します
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 = "sixt";
pimg.style.opacity = "0.9";
document.getElementById( "mybg")。appendchild(pimg);
}
function closediv()//ポップアップレイヤーを閉じます
{
var mybg = document.getElementById( "mybg");
document.body.removechild(mybg);
document.body.style.overflow = "auto"; //ページscrollbarを復元します
//document.getElementById("mybg").style.display="none ";
}
show( 'loading/loading3.gif'、 '100'、 '100');
document.oneadedStateChange = subsomething; //ページの読み込み状態が変更されたときにこのメソッドを実行します。
function subsomething(){
if(document.readystate == "complete"){//ページの読み込み状態が完全に終了したときに入力します
closediv();
}
}
</script>
</html>