divから離れたウェブページのすべてを薄暗くする方法 - 注意を喚起するには

Question

現在、このトピックに関する既に質問されている質問はありません。したがって、私は新しい質問をしています。私はログインページを持っていて、次の機能を使って2秒間ロード中のGIFを表示した後、divに表示されたdivが表示されるサインインボタンがあります。

function showDiv() { 
document.getElementById('Login').style.display = "none"; 
document.getElementById('loadingGif').style.display = "block"; 
setTimeout(function() { 
document.getElementById('loadingGif').style.display = "none"; 
document.getElementById('showme').style.display = "block"; 
},2000); 

} 

サインインボタンをクリックした後、このdivの背後にあるすべての部分を調光する方法については、私は固執しています。

私の現在のフォーム

<form action="" method="POST" id="hello" onsubmit="showDiv(); return 
false;"> 

あなたはモーダルをしようとしているように、ボタン

<input class="btn_green_white_innerfade btn_medium" type="submit" 
name="submit" id="Login" value="Sign in" width="104" height="25" 
border="0" tabindex="5" onclick="showDiv()"> 

Answer 1

で私のサインがね。ページ上のすべて暗くするには：

すると、ページ

<div class="covering-panel"> 
    // form goes here 
</div> 

上の要素を作成し、それを高さと幅は、画面をカバーする固定位置を与えます。

.covering-panel { 
    background: rgba(0,0,0, 0.6); // opaque black 
    height: 100vh;     // height of the viewport 
    position: fixed;    // always cover the screen 
    width: 100%;     // width of the viewport 
    z-index: 30;     // stay on top of other elements 
} 

.covering-panelのdiv内のフォームを入れて、全体の要素を表示隠すためにJavaScriptを使用しています。