javascript - 如何创建具有透明网站其余部分的简单 div？

Question

如何创建具有透明站点其余部分的简单 div（此 div 将在单击链接或其他 div 后显示）

这里的例子：

Answer 1

不能rgba(0, 0, 0, 0.8);用作背景吗？小提琴示范

div#transparent {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:2;
background:rgba(0, 0, 0, 0.8);
}
div#content {
width:300px;
height:300px;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}

Answer 2

另一种方法是使用 jQuery UI。使用 jQuery UI，您可以使用dialog小部件和modal属性来获得相同的效果。jQuery UI 还有很多其他非常有用的小部件。

jQuery 用户界面：http: //jqueryui.com/

您还可以使用 jQuery Themeroller 向 jQuery UI 添加不同的主题或制作自定义主题以获得所需的透明背景

jQuery Themeroller：http: //jqueryui.com/themeroller/

jsFiddle 上的工作示例：http: //jsfiddle.net/jk4ru/

Answer 3

使用 jquery：http: //jsfiddle.net/bbgwB/

$.fn.center = function () {
    this.css({
        'top': ($(window).height() - this.height()) / 2,
        'left': ($(window).width() - this.width()) / 2
    });
    return this;
};

$(function () {
    $(window).resize(function () {
        $('.message').center();
    }).resize();
});

使用的CSS：

html, body {
   height:100%;
}
.overlay {
  width:100%;
  height:100%;
  background:rgba(0, 0, 0, 0.4);
  position:relative;
  z-index:1;
}
.message {
   width:120px;
   height:200px;
   background:yellow;
   position:absolute;
   z-index:2;
   left:0;
   top:0;
}