如何显示Oracle网站的这个效果呢?

Question

http://www.oracle.com/index.html页面的右上方有个按钮"Oracle WebSites", 点击之后, 主页就被 一个半透明的层遮住了... (请教, 如何做一个半透明的层? 用什么属性? IE, FF都兼容的)loading之后 (loading我想是Ajax调用, loading画面是个图片), Ajax调用结束后, 显示子窗口...
求各位大大, 如何做一个半透明的层?

Answer 1

先定义一个CSS样式：
＜style type="text/css"＞
＜!--
.halfalpha { background-color: #000000; filter: Alpha(Opacity=50)}
--＞
＜/style＞
然后应用在层标签里：
＜div class="halfalpha"＞ 

Answer 2

这种效果可以使用一些UI库很简单就能制作,类似桌面程序的模式窗口,可以用一个div半透明化覆盖整个页面,然后显示一个内层,通过内层按纽控制该div的显示/隐藏,至于该div中的内容,你可以自己定义
使用jquery
$('<button>show modal panel</button>')
  .appendTo('body')
  .click(function(){
  if($('#modal_panel').length==0){
$('<div id="modal_panel"></div>').appendTo('body')
.css({
'position':'absolute',
'width':'100%',
'height':'100%',
'top':0,
'left':0,
'opacity':0.5 ,
'background-color':'black'
})
.append('<button value="hide">hide</button>')
;
$('#modal_panel>button').click(function(){
$('#modal_panel').hide();
});
}
else{
$('#modal_panel').show();
}
  });

Answer 3

FireFox里完全不行...  filter是微软的东东...

Answer 4

.halfalpha{background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}
这样能支持大部分浏览器了

Answer 5

仅供参考：
        var div = document.createElement('div');
        div.style.position = 'absolute';
        div.style.left = '0px';
        div.style.top = '0px';
        div.style.width = '100%';
        div.style.height = '100%';
        div.style.backgroundColor = '#000000';
        div.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)';
        div.style.opacity = '0.6';
        document.body.appendChild(div);

Answer 6

今天发现....
用jQuery UI轻松可以搞定....
晕