RGBBA色と互換性のある半透明背景色javascript

3746 ワード

一、IEとFFの下でDcument.bodyオブジェクトのclientHeight、offset Height、scrollHeight属性の違い.
clientHeight
IEとFFの下では、この属性に差はなく、ブラウザの可視領域、つまりブラウザのツールバーのステータスバーの残りのページの展示空間の高さを指します.
offset Height
IEでは、offset Heightもブラウザの視認領域の高さである(境界線を含む).
FFの下で、offset Heightはページの具体的な内容の高さです.
scrollHeight
IEの下で、scrollHeightはページの具体的な内容の高さで、clientHeightより小さいことができます.
FFの下では、scrollHeightはウェブページの内容の高さですが、最小値はclientHeightです.
二、次はブラウザをまたいで現在のページの高さを取得する解決方法です.

function getPageSize() 
{ 
var body = document.documentElement; 
var bodyOffsetWidth = 0; 
var bodyOffsetHeight = 0; 
var bodyScrollWidth = 0; 
var bodyScrollHeight = 0; 
var pageDimensions = [0,0]; 
pageDimensions[0]=body.clientHeight; 
pageDimensions[1]=body.clientWidth; 
bodyOffsetWidth=body.offsetWidth; 
bodyOffsetHeight=body.offsetHeight; 
bodyScrollWidth=body.scrollWidth; 
bodyScrollHeight=body.scrollHeight; 
if(bodyOffsetHeight > pageDimensions[0]) 
{ 
pageDimensions[0]=bodyOffsetHeight; 
} 
if(bodyOffsetWidth > pageDimensions[1]) 
{ 
pageDimensions[1]=bodyOffsetWidth; 
} 
if(bodyScrollHeight > pageDimensions[0]) 
{ 
pageDimensions[0]=bodyScrollHeight; 
} 
if(bodyScrollWidth > pageDimensions[1]) 
{ 
pageDimensions[1]=bodyScrollWidth; 
} 
return pageDimensions; 
} 

三、ページにdivを置いて、カバー層として、下にこのカバー層のcssスタイルがあります.
コードは以下の通りです

.lockDiv 
{ 
position:absolute; 
left:0; 
top:0; 
height:0; 
width:0; 
border:2 solid red; 
display:none; 
text-align:center; 
background-color:#DBDBDB; 
filter:Alpha(opacity=60); 
} 
四、クライアントで下のjavascriptを使ってカバー層でページ全体を閉じます.
コードは以下の通りです

var sandglassSpan = 1; 
var timeHdl; 
function DisablePage() 
{ 
var ctrlSandglass = document.getElementById("divSandglass"); 
if(sandglassSpan==0) 
{ 
window.clearTimeout(timeHdl); 
ctrlSandglass.style.display = "none"; 
document.body.style.cursor = 'auto'; 
sandglassSpan = 1; 
} 
else 
{ 
document.body.style.cursor = 'wait'; 
var pageDimensions = getPageSize(); 
ctrlSandglass.style.top = 0; 
ctrlSandglass.style.left = 0; 
ctrlSandglass.style.height = pageDimensions[0]; 
ctrlSandglass.style.width = pageDimensions[1]; 
ctrlSandglass.style.display = "block"; 
timeHdl = window.setTimeout(DisablePage,200); 
} 
} 
五、もしページでAS.netのValidatorコントロールを使ったら、次のjavascriptを使うべきです.
コードは以下の通りです

var sandglassSpan = 1; 
var timeHdl; 
function DisablePageHaveValidator() 
{ 
var ctrlSandglass = document.getElementById("divSandglass"); 
if(false == Page_IsValid) 
{ 
sandglassSpan = 0; 
} 
if(sandglassSpan==0) 
{ 
window.clearTimeout(timeHdl); 
ctrlSandglass.style.display = "none"; 
document.body.style.cursor = 'auto'; 
sandglassSpan = 1; 
} 
else 
{ 
document.body.style.cursor = 'wait'; 
ctrlSandglass.style.display = "block"; 
var pageDimensions = getPageSize(); 
ctrlSandglass.style.top = 0; 
ctrlSandglass.style.left = 0; 
ctrlSandglass.style.height = pageDimensions[0]; 
ctrlSandglass.style.width = pageDimensions[1]; 
timeHdl = window.setTimeout(DisablePageHaveValidator, 200); 
} 
} 
六、Dispable PageとDispable PageHaveValidatorの二つの方法はボタンのonclickイベントまたは他のタイミングで呼び出すことができます.