按下按钮时使背景处于非活动状态

Question

当我在推特背景上点击一个用户名时，它会变为非活动状态并且变暗。就像那样：

我想在按下按钮时使我的网站背景无效，我该怎么做？

注意：我现在想要使用哪种解决方案当按下按钮时，我的网站中间出现/消失了一个框？我是这样做的。

//in css
.visible{
    display: inline;
}
.hidden {
    display: none;
}

//in jquery
$("#div1").click(function() {
    $('#div2').removeClass("visible").addClass("hidden");
}

Answer 1

这称为灯箱。 第一击会让你开心：https://www.google.nl/search?q=lightbox

Answer 2

您正在尝试构建灯箱。只需显示半透明背景颜色的全屏div。

简单的解决方案：

CSS：

.lightbox {
    display:none;
    position: absolute;
    z-index:10;
    background-color: rgba(255,255,255,0.7);
}

HTML：

<a href="#">Show lightbox</a>
<div class="lightbox"></div>
</body>

JQuery的：

$("a").on("click",function(){
$(".lightbox").css({'width':$(document).width()+'px','height':$(document).height()+'px'});
$(".lightbox").show();
return false;

});