请指点js遮罩的问题

walkingp 2010-02-28 02:44:51
我刚写了一个用于实现遮罩功能的库,但存在两个问题:
1、库中并没有使用removeChild,但div第二次遮罩就消息了;
2、当页面高度过大,出现滚动条时,遮罩位置显示不正确。

请高手指点。
<!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 type="text/javascript">
/******************************
*功能:提供js遮罩功能
*开发:walkingp
*主页:http://www.51obj.cn/
*E-mail:walkingp@126.com
*******************************/
(function(){
var $=document.getElementById;
var id='lightBox';
var cuteDialog={
/*遮罩样式*/
shadowCssText:'filter:alpha(opacity=80);opacity:0.8;background:#000;width:100%;position:absolute;left:0;top:0;z-index:99998;',
/*对话框样式*/
dialogCssText:'position:absolute;height:50;margin-left:-300px;left:50%;font-size:12px;padding:10px;width:600px;z-index:99999;background:#fff;border:solid 10px #666;',
/*p层新式*/
pCssText:'text-align:right;',
showDialog:function(){
var oDiv=$(arguments[0]);
/*遮罩层*/
var shadow=document.createElement('div');
shadow.setAttribute('id','shadow');
shadow.setAttribute('style',this.shadowCssText);

/*对话框*/
var dialog=document.createElement('div');
dialog.setAttribute('id','dialog');
dialog.setAttribute('style',this.dialogCssText);
dialog.appendChild(oDiv);

/*p层:存放操作按钮*/
var p=document.createElement('p');
p.setAttribute('style',this.pCssText);

var btnClose=document.createElement('button');
btnClose.innerHTML='关闭';
btnClose.onclick=function(){
var oShadow=$('shadow'),oDialog=$('dialog');
document.documentElement.removeChild(oShadow);
document.documentElement.removeChild(oDialog);
}
p.appendChild(btnClose);

dialog.appendChild(p);

document.documentElement.appendChild(shadow);
document.documentElement.appendChild(dialog);
//遮罩层100%高度
var h=document.documentElement.clientHeight + 'px';
$('shadow').style.height=h;
},
hideDialog:function(){

}
}
function InitFunc(){
$('openDlg').onclick=function(){
cuteDialog.showDialog('lightBox');//初始化遮罩
}
}
/*初始化*/
(function AddLoadEvent(func){
if(window.attachEvent){
window.attachEvent('onload' ,func);
}else if(window.addEventListener){
window.addEventListener('load',func,false);
}else{
window.onload=func;
}
})(InitFunc);
})();
</script>
</head>

<body>
<button id="openDlg">打开</button>
<div id="lightBox">这是其中的内容</div>
</body>
</html>
...全文
181 9 打赏 收藏 举报
写回复
9 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
walkingp 2010-03-01
  • 打赏
  • 举报
回复
你的这句代码让我佩服的无体投地:
$('shadow').style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";

Math.max !!!
walkingp 2010-03-01
  • 打赏
  • 举报
回复
引用 1 楼 wtcsy 的回复:
你明明就是用的删除  你居然说你不是用的removeChild
效果考虑不周全 没有考虑浏览器缩放的问题


最近状态不佳啊。
……
document.documentElement.removeChild(oShadow);
document.documentElement.removeChild(oDialog);
把这个给搞忘了……
cloudgamer 2010-03-01
  • 打赏
  • 举报
回复
可以考虑用fixed,参考这里
不过ie6不支持
cn00439804 2010-03-01
  • 打赏
  • 举报
回复
看看最近很火的这个帖子,遮罩就是人家代码里的一个小功能
http://topic.csdn.net/u/20100223/17/edb27cb3-24ff-461d-9cff-eb8b8816b6bf.html?56921
而且还兼容很多浏览器
walkingp 2010-03-01
  • 打赏
  • 举报
回复
还有为什么遮罩在其他浏览器上都不起作用?
passself 2010-02-28
  • 打赏
  • 举报
回复
学习了,大家都很强啊,学习
zhyzdl 2010-02-28
  • 打赏
  • 举报
回复
不错.学习了... ...
archko 2010-02-28
  • 打赏
  • 举报
回复
你的错误在于
var oDiv1=$(arguments[0]);
var oDiv=oDiv1.cloneNode(true);
当你removeChild(dialog)时因为这时你把oDiv放到dialog里面了,所以再一次获得oDiv时,页面上已经没有这东西了.用上面的,复制一个节点,把它放到dialog里面就可以解决了.
关于遮住的高度.LS已经说了
wtcsy 2010-02-28
  • 打赏
  • 举报
回复
你明明就是用的删除 你居然说你不是用的removeChild
效果考虑不周全 没有考虑浏览器缩放的问题

<!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 type="text/javascript">
/******************************
*功能:提供js遮罩功能
*开发:walkingp
*主页:http://www.51obj.cn/
*E-mail:walkingp@126.com
*******************************/
(function(){
var $=document.getElementById;
var id='lightBox';
var cuteDialog={
/*遮罩样式*/
shadowCssText:'filter:alpha(opacity=80);opacity:0.8;background:#000;width:100%;position:absolute;left:0;top:0;z-index:99998;',
/*对话框样式*/
dialogCssText:'position:absolute;height:50;margin-left:-300px;left:50%;font-size:12px;padding:10px;width:600px;z-index:99999;background:#fff;border:solid 10px #666; top:100px',
/*p层新式*/
pCssText:'text-align:right;',
showDialog:function(){
var oDiv=$(arguments[0]);
/*遮罩层*/
if($('shadow')==null)
{
var shadow=document.createElement('div');
shadow.setAttribute('id','shadow');
shadow.setAttribute('style',this.shadowCssText);

/*对话框*/
var dialog=document.createElement('div');
dialog.setAttribute('id','dialog');
dialog.setAttribute('style',this.dialogCssText);
dialog.appendChild(oDiv);

/*p层:存放操作按钮*/
var p=document.createElement('p');
p.setAttribute('style',this.pCssText);

var btnClose=document.createElement('button');
btnClose.innerHTML='关闭';
btnClose.onclick=function(){
var oShadow=$('shadow'),oDialog=$('dialog');
//document.documentElement.removeChild(oShadow);
//document.documentElement.removeChild(oDialog);
shadow.style.display = "none";
oDialog.style.display = "none";
}
p.appendChild(btnClose);

dialog.appendChild(p);
document.documentElement.appendChild(shadow);
document.documentElement.appendChild(dialog);
}
else
{
$('shadow').style.display = "block";
$('dialog').style.display = "block";
}

//遮罩层100%高度
// var h=document.documentElement.clientHeight + 'px';
//$('shadow').style.height=h;
$('shadow').style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
$('shadow').style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)+"px"
},
hideDialog:function(){

}
}
function InitFunc(){
$('openDlg').onclick=function(){
cuteDialog.showDialog('lightBox');//初始化遮罩
}
}
/*初始化*/
(function AddLoadEvent(func){
if(window.attachEvent){
window.attachEvent('onload' ,func);
}else if(window.addEventListener){
window.addEventListener('load',func,false);
}else{
window.onload=func;
}
})(InitFunc);
})();
</script>
</head>

<body>
<button id="openDlg">打开</button>
<div id="lightBox">这是其中的内容</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
</body>
</html>
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2010-02-28 02:44
社区公告
暂无公告