首页  /  留言  /  音乐  /  管理

透明遮罩层

在很多WEB开发的时候我们都需要用到透明遮罩层来实现某些功能。下面共享一下比较实用的代码;

 

JS代码:


<script language="javascript" type="text/javascript">
//创建一个遮罩层
function Layer(html)
{
//创建一个遮罩层,半透明
var lay = document.createElement_x("div");
lay.id = "frame"
with(lay.style)
{
width = "100%";
height = String(Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight))+"px";
background = "#000000";
position = "absolute";
left = "0";
top = "0";
filter = Alpha(opacity=70);
opacity = 0.7;
}
document.body.appendChild(lay);
document.getElementById_x("frame").ondblclick = hiddenDiv;

//创建显示内容
var info = document.createElement_x("div");
info.id = "msg";
info.innerHTML = html;
document.getElementById_x("frame").appendChild(info);
with(info.style)
{
position = "absolute";
left = "0px";
top = document.documentElement.scrollTop + document.body.scrollTop + "px";
marginLeft = (document.documentElement.clientWidth - info.offsetWidth)/2 + "px";
marginTop = (document.documentElement.clientHeight - info.offsetHeight)/2 + "px";
}
document.body.appendChild(info);
}

//关闭遮罩层
function hiddenDiv(){document.body.removeChild(document.getElementById_x("frame"));document.body.removeChild(document.getElementById_x("msg"));}

function loadIndex(){
Layer("<b>Cawei</b>");
}
</script>

HMTL代码:


<body onload="loadIndex()">
<table><tr><td>伟博小城</td></tr><tr><td><select><option>www.webczw.com</option><option>遮罩层</option></select></td></tr></table>
</body>

作者:伟博 类别:其他分类 时间:2012/2/7 16:47:31 评论:0 点击42
标签:  webczw,伟博小城
打印:  打印本页
字体:  
本页地址:  http://www.webczw.com/s/20122716473160921.html
上一篇:麻木
下一篇:PHP5+APACHE2.2配置

  评论    
当第一个评论者吧!抢沙发>>
  
昵    称: Wilber
形    象:
内    容:
验证码:   
以上网友发言只代表其个人观点,不代表伟博小城的观点或立场。
  Copyright © 2010 - 2016 WEBCZW.COM, All Rights Reserved
伟博小城  版权所有 网站统计
粤ICP备14091989号