另一javascript写的类似ModalPopup的效果

来自小新的博客http://www.cnblogs.com/xiaoxinzhu/archive/2006/11/24/571027.html

这几天路由坏了不能上网，今天看见了杨丹的一片随笔，和偶一样因为ModalPopupExtender 不能激发服务器端事件而郁闷半天。我也用Javascript写了个类似ModalPopup的效果，相比之下代码多了点，但是加了个小功能（从ModalPopup的JS里面提取的，嘿嘿！）。

改变窗体、滚动窗体，漂浮窗口，也随之变化，点击旁边遮掩层（半透明的）可以 关闭浮动窗口。

效果如下：


调整大小：


滚动窗体：


帖代码。。。
CSS：

遮掩层
<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->#BOX_overlay{}{
position:absolute;
z-index:100;
top:0px;
left:0px;
background-color:#000;
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity:0.6;
}

Javascript：

1 // BOX
2 function BOX_show(e) {//显示
3if($get(e)==null){return;}
4BOX_layout(e);
5window.onresize=function(){BOX_layout(e);}//改变窗体重新调整位置
6window.onscroll=function(){BOX_layout(e);}//滚动窗体重新调整位置
7}
8 function BOX_remove(e) {//移除
9window.onscroll=null;
10window.onresize=null;
11$get('BOX_overlay').style.display="none";
12$get(e).style.display="none";
13}
14 function BOX_layout(e) {//调整位置
15vara=$get(e);
16if($get('BOX_overlay')==null){//判断是否新建遮掩层
17varoverlay=document.createElement("div");
18overlay.setAttribute('id','BOX_overlay');
19overlay.onclick=function(){BOX_remove(e);};
20a.parentNode.appendChild(overlay);
21}
22//取客户端左上坐标，宽，高
23varscrollLeft=(document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft);
24varscrollTop=(document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop);
25varclientWidth;
26if(window.innerWidth){
27clientWidth=((Sys.Browser.agent===Sys.Browser.Safari)?window.innerWidth:Math.min(window.innerWidth,document.documentElement.clientWidth));
28}else{
29clientWidth=document.documentElement.clientWidth;
30}
31varclientHeight;
32if(window.innerHeight){
33clientHeight=((Sys.Browser.agent===Sys.Browser.Safari)?window.innerHeight:Math.min(window.innerHeight,document.documentElement.clientHeight));
34}else{
35clientHeight=document.documentElement.clientHeight;
36}
37varbo=$get('BOX_overlay');
38bo.style.left=scrollLeft+'px';
39bo.style.top=scrollTop+'px';
40bo.style.width=clientWidth+'px';
41bo.style.height=clientHeight+'px';
42bo.style.display="";
43//Popup窗口定位
44a.style.position='absolute';
45a.style.zIndex=101;
46a.style.display="";
47a.style.left=scrollLeft+((clientWidth-a.offsetWidth)/2)+'px';
48a.style.top=scrollTop+((clientHeight-a.offsetHeight)/2)+'px';
49}

第一次发代码有点乱，请见谅。
最后附上 源码