<div class="codetitle"> <span><a style="CURSOR: pointer" data="39268" class="copybut" id="copybut39268" onclick="doCopy('code39268')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code39268"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><HTML> <br><HEAD> <br><TITLE> New Document </TITLE> <br><meta charset="UTF-8"> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <br><META NAME="Author" CONTENT=""> <br><META NAME="Keywords" CONTENT=""> <br><META NAME="Description" CONTENT=""> <br><style type="text/css"> <br>* <br>{ <br>padding:0px; <br>margin:0px; <br>} <br>#Idiv <br>{ <br>width:900px; <br>height:auto; <br>position:absolute; <br>z-index:1000; <br>border:2px solid #ffffff; <br>background:#ffffff; <br>} <br></style> <br><br></HEAD> <br><body> <br><br><div id="Idiv" style="display:none;"> <br><a href="javascript:void(0)" onclick="closeDiv()">点击关闭层</a> <br><br/>document.documentElement 的区别<br/>document.documentElement 的区别 <br></div> <br><div><a href="javascript:void(0)" id="show" onclick="show()">点击打开弹出层！</div> <br></body> <br><script langue="javascript"> <br><br>関数 show() <br>var Idiv=document.getElementById("Idiv") ; <br>Idiv.style.display="block"; <br>//次の部分はポップアップ レイヤーを中央に配置する必要があります <br>Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/ 2 document .documentElement.scrollLeft "px"; <br>//alert(document.body.scrollTop) <br>var aa_scrollTop = document.body.scrollTop || document.body.scrollTop; Idiv. style.top=(document.documentElement.clientHeight-Idiv.clientHeight)/2 aa_scrollTop "px"; // ここで問題が発生します。高さが中央に表示されず、 //一部が見えないので、<br><br><br>の下に一時的に margin-top を追加します。//以下の部分はページ全体を灰色にし、 unclickable<br>var procbg = document.createElement("div"); / /まず div を作成します <br>procbg.setAttribute("id","mybg") //div の ID を定義します <br>procbg .style.background ="#000000"; <br>procbg.style.width ="100%"; <br>procbg.style.position ="固定" ; <br>procbg.style.top ="0"; <br>procbg.style.left ="0"; <br>procbg.style.opacity =" 0.6"; <br>procbg.style.filter ="Alpha(opacity=70 )"; <br>//スクロールバーをキャンセル<br>document.body.appendChild(procbg); <br>document.body.style .overflow ="auto"; <br><br>// 以下の部分はレイヤーのポップアップドラッグ効果を実装します (レイヤー内で div の動きをポップアップさせたい場合は、次のログアウトを削除するだけです) <br>/ * <br>var posX; <br>var posY; <br>Idiv.onmousedown=function(e ) <br>{ <br>if(!e) e = window.event; e.clientX - parseInt(Idiv.style.left); <br>posY = e.clientY - parseInt (Idiv.style.top); <br>document.onmousemove = Mousemove <br>} =function() <br>{ <br>document.onmousemove =null; <br>} <br>function Mousemove(ev) <br>{ <br>if(ev==null) ev = window.event;/ /IE <br>Idiv.style.left = (ev.clientX - posX) "px"; <br>Idiv.style.top = (ev.clientY - posY) "px"; ><br>} <br>function closeDiv() //ポップアップレイヤーを閉じる<br>{ <br><br>var Idiv=document.getElementById("Idiv"); <br>var mybg = document.getElementById( "mybg"); <br>document.body.removeChild(mybg); <br>document.body.style.overflow ="auto";//スクロールバー<br>//document.getElementById("mybg").style.display="none"; <br>} <br></script> <br></HTML>上のポップアップ レイヤーを使用して、独自の読み込み関数を作成します。ページが読み込まれたかどうかを確認し、完了後にloading.gifを非表示にします <br><br><!DOCTYPE html> <br><html xmlns="http://www.w3.org/1999/xhtml" > <br><head> <br><title>新しいドキュメント </title> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8 " /> ; <BR></head> <br><body onload="subSomething()"> <br><br><br></body> <br><script type=" text/ecmascript "> <br>function show(addressImg, img_w, img_h) { <br>//ページの高さを取得します<br>var h = (document.documentElement.scrollHeight > document.documentElement.clientHeight) ? document .documentElement.scrollHeight : document.documentElement.clientHeight; <br>//ページ幅を取得します<br>var w = (document.documentElement.scrollWidth > document.documentElement.clientWidth) : document.documentElement ? .scrollWidth; <br>var procbg = document.createElement("div"); //最初に div を作成します <br>procbg.setAttribute("id", "mybg"); //div の ID を定義します>procbg.style.background = "#555"; <br>procbg.style.width = "100%"; <br>procbg.style.position = "修正済み"; <br> procbg.style.top = "0"; <br>procbg.style.left = "0"; <br>procbg.style.zIndex = "500"; <br>procbg.style.opacity = "0.6"; <br>procbg.style.filter = "Alpha(opacity=70)" <br>//スクロールバーをキャンセルします<br>document.body.appendChild(procbg); .style.overflow = "auto "; <br><br><br>var pimg = document.createElement("img") //画像を作成します <br>pimg.setAttribute("id", "bg_img"); ; // div ID を定義します <br>pimg.setAttribute("src", addressImg) // div の ID を定義します <br>var img_w = (w - img_w) / 2; = (h - img_h) / 2; <br>pimg.style.top = img_h "px"; <br>pimg.style.left = img_w "px"; <br>pimg.style.opacity = "0.9"; <br>document.getElementById("mybg").appendChild(pimg); <br>} <br>function closeDiv() //ポップアップレイヤーを閉じる<br> { <br>var mybg = document.getElementById ("mybg"); <br>document.body.removeChild(mybg); <br>document.body.style.overflow = "auto";// ページ スクロール バーを復元します<br>//document.getElementById("mybg ").style.display="none"; <br>} <br>show('loading/loading3.gif', '100', '100'); >document.onreadystatechange = subSomething;//ページ読み込み時 <br>function subSomething() { <br>if (document.readyState == "complete") { //ページ読み込み時ステータスは完全に完了しています。<br>closeDiv(); <br>} <br></script> <br><br> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
