码迷,mamicode.com
首页 > 其他好文 > 详细

透明框

时间:2015-02-21 10:52:21      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:

就是相关控件的显示(展开)

opacity是透明度的设置
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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:#3333cc; 
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> 

  

透明框

标签:

原文地址:http://www.cnblogs.com/souroot/p/4296863.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!