指定されたdivの上にjavascriptイメージオーバーレイ

Question

私はjavascriptで新しいです。実際には非常に新しい、これは私の最初のスクリプトでなければなりません。 誰も指定された固定幅領域、たとえば700x300pxで透明オーバーレイを作る方法を私に説明することができます。

Answer 1

あなたはCSS

.myoverlay { 
    position: absolute; 
    display: none; 
    ... 
} 

に、私はかなりの必要性を見ていない...など

<div id="myoverlay" class="myoverlay">...contents...</div> 

としてオーバーレイを定義し、寸法及び位置とzインデックスなどを定義することができますJavaScriptはまだまだですが、JSを使用してオーバーレイの表示属性をオン/オフに切り替えたいと思うでしょう。

<script type="text/javascript"> 
function showOverlay(){ 
    document.getElementById("myoverlay").style.display = "block"; 
} 
</script> 

これはおおよそ後のことですか？意図しない文法ミスで申し訳ありませんが、これは純粋に私の頭の上からテストされていないコードです。ちょうどあなたに考えを与えるために。

Answer 2

透明体を使用してdivを作成し、指定した領域に絶対配置することができます。非IEブラウザの

var shimDiv = document.createElement('div'); 
shimDiv.id = 'shim'; 
shimDiv.style.position = 'absolute'; 
shimDiv.style.top = 0; 
shimDiv.style.left = 0; 
shimDiv.style.width = "700px"; 
shimDiv.style.height = "300px"; 
shimDiv.style.backgroundColor = '#000'; 
shimDiv.style.zIndex = 3; 

不透明度設定：

shimDiv.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=75)'; 

そして、この新しいdiv要素を追加します：IEはネイティブにあなたは、このようなフィルタを使用する必要があり、透明性をサポートしていませんので

shimDiv.style.opacity = '0.75'; 

を文書本体の最後：

document.body.appendChild(shimDiv); 

古いIEのバージョンをサポートするには、透明なDIVの下にIFrame要素を配置する必要があります。これは（ページをロードしようとしているからIFrameのを防ぐために声明：役に立たない「偽のjavascript」でのIFrameのsrc属性を設定することを忘れないでください

var iframe = document.createElement('iframe'); 
iframe.setAttribute("src", "javascript:false"); 

：次のコードを試してみてください、JavaScriptから動的にiFrameを作成するには

HTTPSページで使用すると「Unsecured Items」というメッセージが表示される原因になります）。

divの下にこのIFrameを配置するには、z-indexプロパティの値を低くします。

iframe.style.zIndex = 2; 

すべてのスタイリングはCSSで行うことができます。 JavaScriptでどのように行われたかを示したかっただけです。