如何用透明的网站创建简单的div？

Question

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

这里的例子：

Answer 1

您不能使用rgba(0, 0, 0, 0.8);作为背景吗？ Fiddle For Demonstration

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 UI ： http://jqueryui.com/

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

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;
}