javascript - 单击时创建变暗的背景

Question

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

Answer 1

演示 using jQuery 或 using 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: fixed 因为 100% 高度只是窗口高度，如果您的文档较大，使用 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