html在图片上弹出遮罩层半透明,JavaScript带有半透明遮罩的弹出层实例代码

遮罩层弹出窗口代码实例

.black_overlay

{

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

}

.white_content

{

display:none;

position:absolute;

top:25%;

left:25%;

width:50%;

height:50%;

padding:16px;

border:16px solid orange;

background-color:white;

z-index:1002;

overflow:auto;

}

window.οnlοad=function()

{

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

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

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

var oclose=document.getElementById("close");

thelink.οnclick=function()

{

light.style.display='block';

fade.style.display='block';

}

oclose.οnclick=function()

{

light.style.display='none';

fade.style.display='none';

}

}

点击这里打开窗口

Close