单击创建灰色背景 [英] 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屋!