javascript - クリックして薄暗い背景を作成する

Question

あいまいすぎないことを願っています。リンクをクリックした後、ページ全体を暗くするだけです。div style="height:100%; width=100%;"私は高いと持っていることを想像しz-indexます。ウェブページをカバーするため。私の質問は、このdivを切り替えることです。これを達成するために何を使うべきかわかりません。

Answer 1

jQueryまたはbog-standard Javascript を使用したデモ。どちらも要素を切り替える方法を示しています。

HTMLこれをどのように切り替えたいかについて、あなたは言いませんでした。ボタンを使う？

<button onclick="dim();">Dim</button>
<div id="dimmer"></div> 

ただし、調光器がボタンの上にあることに注意してください

CSS

#dimmer
{
    background:#000;
    opacity:0.5;
    position:fixed; /* important to use fixed, not absolute */
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    z-index:9999; /* may not be necessary */
}

注意position: fixed100% の高さはウィンドウの高さだけであり、ドキュメントが大きい場合、使用position: absoluteしてもドキュメント全体が薄暗くなることはありません。スクロールしてコンテンツが表示されていることを確認できます。

Javascript

function dim(bool)
{
    if (typeof bool=='undefined') bool=true; // so you can shorten dim(true) to dim()
    document.getElementById('dimmer').style.display=(bool?'block':'none');
}    

dim(true); // on
dim(false); // off

Answer 2

簡単な JavaScript で実行できます

デモ

HTML

<a href="#" onclick="dim_div()">Click me</a>
<div id="toggle_div"></div>
Hello World

JavaScript

function dim_div() {
    document.getElementById("toggle_div").style.display="block";
}

CSS

#toggle_div {
    background-color: rgba(255, 255, 255, .6);
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 999;
}

Answer 3

HTML

<div id="initial_opacity_zero"></div>
<button id="button_to_adjust_opacity" onclick="func_onclick();"></button>

CSS

div#initial_opacity_zero{
  opacity:0;
  display:block;
  position:fixed;
  top:0px; right:0px; bottom:0px; left:0px;
}

JavaScript:

function func_onclick(){
  document.getElementById("initial_opacity_zero").style.opacity="0.6";
}