javascript - 单击时创建一个暗淡的背景

Question

希望不要太含糊。我要做的就是在单击链接后使整个页面变暗。我会想象有div style="height:100%; width=100%;"一个高z-index。覆盖网页。我的问题是切换这个 div。我不知道我什至应该用什么来完成这个。

Answer 1

使用 jQuery或使用沼泽标准 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 */
}

NB 使用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";
}