随笔-75  评论-74  文章-35  trackbacks-1

最近上网的时候看见一些网站在出现对话框后,背景是灰度透明的,不可动,这种效果是如何做的?
今天研究了一下,原来实现的方法十分的简单,并没有开始想象中的那么复杂,就是使用了一个层,使用了滤镜的效果,只是不知道在其他的浏览器中显示是怎么样的,IE6.0中测试没有问题。


代码

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 "   />
< title > 无标题文档 </ title >
< script >
var  bgDiv
clickView 
=   function ()  {            
    
var  msgw,msgh,bordercolor;
    
// msgw=500;//提示窗口的宽度
     // msgh=400;//提示窗口的高度
     // bordercolor="#ccc";//提示窗口的边框颜色

    
var  sWidth,sHeight;
    sWidth
= screen.width - 24 ;            
    sHeight
= document.body.scrollHeight;
        
    bgDiv 
=  document.createElement( " div " );
    bgDiv.setAttribute('id','bgDiv');
    bgDiv.style.position 
=   " absolute " ;
    bgDiv.style.top 
=   " 0 " ;
    bgDiv.style.background 
=   " #111 " ;
    bgDiv.style.filter 
=   " progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75 " ;
    bgDiv.style.opacity 
=   " 0.8 " ;
    bgDiv.style.left 
=   " 0 " ;
    bgDiv.style.width 
=  sWidth  +   " px " ;
    bgDiv.style.height 
=  sHeight  +   " px " ;
    bgDiv.style.zIndex 
=   " 10000 " ;
    document.body.appendChild(bgDiv);
    confirm('确定退出?');
</ script >
</ head >

< body >
< p >< a href = " javascript:; "  onclick = " clickView(); " > asdfasdf </ a ></ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
< p >& nbsp; </ p >
</ body >


</ html >

还需要改进。
posted on 2007-12-25 16:47 影子 阅读(89) 评论(0)  编辑  收藏 所属分类: 学习笔记