请指点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>