单击创建灰色背景 [英] Create a dimmed background on-click

问题描述

希望不会太含糊。所有我想做的是使整个页面变暗点击链接后。我想象有 div style =height：100％; width = 100％;有一个高的 z-index 。覆盖网页。我的问题是切换这个div。

Hopefully not too vague. All I want to do is make the entire page go dim after clicking a link. I would imagine having div style="height:100%; width=100%;" with a high z-index. to cover the webpage. My question is toggling this div. I'm not sure what I should even use to accomplish this.

推荐答案

演示使用jQuery 或 使用bog-standard Javascript ，两者都会显示如何切换元素。

Demos using jQuery or using bog-standard Javascript, both showing how you can toggle the element.

HTML 切换此。使用按钮？

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

但是请注意，调光器会覆盖按钮

but bear in mind the dimmer will go over the button

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％height只是窗口高度，如果文档较大，使用 position：absolute

N.B. Use position: fixed as 100% height is only the window height and if your document is larger, using position: absolute doesn't dim the whole document - you can scroll to see there are contents visible.

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

这篇关于单击创建灰色背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！