html中给整个页面一个阴影,CSS&HTML&JQuery – 如何在其他div上显示div并将其设置为阴影背景...

我需要这样的事情：当我点击一些链接时,整个页面必须变得阴暗,我想在页面的中心显示一个新的div(如200px X 200px),而不是其他div(所以不是“浮动” “).

就像把这个新的div放在一边,让另一个div(背景)无法点击.

我该怎么做？我认为CSS应该这样做,我希望我的要求是明确的:)

谢谢

更新(添加了我自己的代码)

// HTML + Jquery

Box I Want To Display

$(document).ready(function() {

$(".articles").click(function() {

$('.contenitoreSite').fadeTo('fast', 0.5);

$('#myBox').removeClass().addClass('box');

$('#myBox').fadeTo('fast', 1);

});

});

Example

// CSS

.boxHidden{display:none;}

.box{width:500px; height:500px; position:absolute; top:80px; left:240px; border:#000000 2px solid; background-color:#FF0000;}

.contenitore{width:980px; margin:0 auto; position:relative;}

.contenitoreSite{width:980px; margin:0 auto;}

我的实际问题：

1 – 我想把整个页面(盒子除外)放在不透明的地方.但是使用此功能,每个孩子都获得不透明度0.5值.我怎样才能解决这个问题？ This是它现在的表现.

2 – 这个属性是不透明的跨浏览器吗？因为我读到IE7不支持它,但是使用JQuery我应该解决这些问题.

3 – 我想把背景(阴暗的)无法点击.我想有可能做到这一点……

解决了

// HTML + Jquery

$(document).ready(function() {

$(".articles").click(function() {

var maskHeight = $(document).height();

var maskWidth = $(window).width();

$('.mask').css({'width':maskWidth,'height':maskHeight});

$('.mask').fadeIn(100);

$('.mask').fadeTo("fast",0.8);

var winH = $(window).height();

var winW = $(window).width();

$("#myBox").removeClass().addClass('box');

$("#myBox").css('top', winH/2-$("#myBox").height()/2);

$("#myBox").css('left', winW/2-$("#myBox").width()/2);

$("#myBox").fadeIn(1000);

});

});

Box I Want To Display

Example

// CSS

.contenitore{width:980px; margin:0 auto; font-size:14px; color:#000000;}

.boxHidden{display:none;}

.box{width:500px; height:500px; position:absolute; z-index:9999; top:0px; left:0px; border:#000000 2px solid; background-color:#FF0000; display:none;}

.mask {position:absolute; z-index:9000; top:0px; left:0px; background-color:#FFFFFF; display:none; }

这个版本应该是跨浏览器的.让我知道你的想法;)