代码如下:

<!

DOCTYPE

html>

<

html

>

<

head

>

<

meta

charset=" utf-8">

<

meta

name="author" content="" />

<

title

>蚂蚁部落</

title

>

<

style

type="text/css">

#fade {

  

display:none;

  

position:absolute;

  

top:0%;

  

left:0%;

  

width:100%;

  

height:100%;

  

background-color:black;

  

z-index:1001;

  

-moz-opacity:0.8;

  

opacity:.80;

  

filter:alpha(opacity=80);

}

#light{

  

display:none;

  

position:absolute;

  

top:25%;

  

left:25%;

  

width:50%;

  

height:50%;

  

padding:16px;

  

border:3px solid orange;

  

background-color:white;

  

z-index:1002;

  

overflow:auto;

}

</

style

>

<

script

type="text/javascript">

window.onload=function(){

   

var linkbt=document.getElementById("linkbt");

   

var light=document.getElementById('light');

   

var fade=document.getElementById('fade');

   

var closebt=document.getElementById("closebt");

   

linkbt.onclick=function(){

     

light.style.display='block';

     

fade.style.display='block';

   

}

   

closebt.onclick=function(){

     

light.style.display='none';

     

fade.style.display='none';

   

}

}

</

script

>

</

head

>

<

body

>

<

a

href="javascript:void(0)" id="linkbt"> 点击这里打开窗口</

a

>

<

div

id="light"><

a

href="javascript:void(0)" id="closebt">关闭窗口</

a

></

div

>

<

div

id="fade""></

div

>

</

body

>

</

html

>

一.实现原理:

在 默认状态下，遮罩层和窗口都是隐藏不可见的，当点击链接之后，能够使窗口和遮罩层显示，并且将遮罩层设置为半透明状态。此两个元素都采用绝对定位同时设置 居中窗口的z-index属性值大于遮罩层，这样就可以使其覆盖在遮罩层之上。当点击关闭按钮的时候，能够将遮罩层和窗口隐藏，原理大致如此。